javascript - Jquery検証（テーブル内のエラーのスタイル設定）

Question

Jquery .validation（）のフォームがあります。

形：

<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>

次のようなエラーを出力したいと思います。

出来ますか？

前もって感謝します ：）

Answer 1

デモはこちら

HTML

<form name="test">
<table cellspacing="1" cellpadding="1">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/>
    <span class="error_span">Enter name</span>
    </td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/>
        <span class="error_span">Enter last name</span>
    </td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/>
        <span class="error_span">Enter address</span>
    </td>
</tr>
</table>
<input type='button' id='submit' name='enter' value='submit'/>
</form>

jQuery

$(document).ready(function(){
    $("#submit").click(function(){
        $('input').each(function(index) {
                   if($(this).val()=="") {
                       $(this).addClass("has_error");
                       $(this).siblings(".error_span").show();
                   }else{
                       $(this).removeClass("has_error");
                       $(this).siblings(".error_span").hide();
                   }
          });
    });
 });

CSS

.error_span{
color:red;
    display:none;
}

.has_error{
 border:1px solid red;
}

デモはこちら

フォームの属性を使用onsubmitしてJavaScriptを実行し、検証エラーがある場合はフォームの送信を停止できます

Answer 2

そのためには、カスタム検証コードを使用する必要があります。このリンクを確認してください。http://docs.jquery.com/Plugins/Validation/Validator/addMethod

Answer 3

あなたは2つの方法で行うことができます..

1)

<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td></td>
<td>Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>

また

2)

<form....>
    <table cellspacing="0" cellpadding="0">
    <tr>
    <td>Name: </td>
    <td><input type='text' name='Name'/></td>
    </tr>
    <tr>
    <td>Last Name: </td>
    <td><input type='text' name='LastName'/> <br />Name Is Required</td>
    </tr>
    <tr>
    <td>Address: </td>
    <td><input type='text' name='Address'/></td>
    </tr>
    </table>
    <input type='submit' name='enter' value='submit'/>
    </form>