jquery - 用 jQuery 标记空字段

Question

我有一个表单，其字段结构如下：

<span class="req">*</span>
<label for="name">Name</label><br>
<input type="text" id="name">

在提交时，我想标记前面有星号的空字段。我假设我可以用它.each()来遍历我的表单字段，但我如何只定位必填字段？

Answer 1

$('.req').each(function(){
    if($(this).text()=='*') {
        if(!$(this).siblings('input').val()) {//Has no value
            //DO STUFF HERE
        }
    }
});

像这样？

或者你可以做这样的事情：

$('input').each(function(){
    //IF NO VALUE AND IS REQUIRED
    if(!$(this).val() && $(this).siblings('.req').length != 0) {
        $(this).addClass('error');//AS PRAVEEN SUGGESTS
        alert('Field is required');
    }
});

警告 此代码假定您的span,label和input位于另一个元素中，并且不共享其他输入和.req's。否则该.siblings()方法将返回多个元素。

Answer 2

请给一个不应该为空required的s 说一个类。input并使用此功能：

$('.required').each(function(){
    if($(this).val() == '') {
        $(this).addClass("error");
    }
});

在 CSS 中，定义.error为：

.error {border: 1px solid #f00;}

演示：http: //jsfiddle.net/jr8r9/