javascript - Jquery validate（样式化表内的错误）

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

你可以通过两种方式..

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>

Answer 3

您必须使用自定义验证代码才能做到这一点。检查此链接。http://docs.jquery.com/Plugins/Validation/Validator/addMethod