使用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。否则，.siblings()方法将返回多个元素。

Answer 2

请向required的课程说input，该课程不应为空。并使用此功能：

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

在CSS中，将.error定义为：

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

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