使用jQuery检查具有某个类的所有输入是否为空

时间:2015-08-10 15:51:41

标签: jquery

我正在尝试检查具有某个类的所有输入字段是否为空。 现在我有以下代码:

HTML

<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

的jQuery

$('.check-fields').on('click', function () {

  var value = $('.required-entry').filter(function () {
    return this.value != '';
  });

  if (value.length == 0) {
    alert('Please fill out all required fields.');
  } else if (value.length > 0) {
    alert('Everything has a value.');
  }
});

但是这会抛出“一切都有价值”的信息。如果任何一个输入有一个值。我试图只在这个类的每个输入中都包含某些内容时抛出该消息。

$('.check-fields').on('click', function () {

    var value = $('.required-entry').filter(function () {
        return this.value != '';
    });

    if (value.length == 0) {
        console.log('Please fill out all required fields.');
    } else if (value.length > 0) {
        console.log('Everything has a value.');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

我也有这个略有不同的代码的小提琴..当第一个输入是唯一填充时,也会抛出Everything有一个值消息。

$('.check-fields').on('click', function () {
    
    if($.trim($('.required-entry').val()) === '') {
        console.log('Please fill out all required fields.');
    } else {
        console.log('Everything has a value.');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

4 个答案:

答案 0 :(得分:9)

检查以下代码:

endDate

答案 1 :(得分:4)

您可能需要更改相同条件,例如以下内容:执行空检查。

var value = $('.required-entry').filter(function () {
    return this.value === '';
});

取决于上述条件,您可以更改if条件,如果所有输入都有值,则会0计数,其他明智的>0计数。

if (value.length == 0) {
   alert('Everything has a value.');
} 
else if (value.length > 0) {
    alert('Please fill out all required fields.');
}

实施例

&#13;
&#13;
$('.check-fields').on('click', function () {
 var value = $('.required-entry').filter(function () {
    return this.value === '';
  });
  if (value.length == 0) {alert('Everything has a value.');
  } else if (value.length > 0) {
    alert('Please fill out all required fields.');
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

 $('input[type="text"]').each(function() {
        if ($.trim($(this).val()) == '') {
           alert('Please fill out all required fields.');

        }
        else {
            alert('Everything has a value.');

        }
    });

 $('input[class="required-entry"]').each(function() {
        if ($.trim($(this).val()) == '') {
           alert('Please fill out all required fields.');

        }
        else {
            alert('Everything has a value.');

        }
    });

答案 3 :(得分:0)

也许你可以满足于

<input type="text" class="semantic-classname" required />

http://caniuse.com/#feat=form-validation