如何使用jQuery检查所有表单输入是否为空?

  • 回答 (2)
  • 关注 (0)
  • 查看 (532)

我试图验证一个联系人表单,我想创建某种‘表单完成’消息,一旦每个输入字段已被填充(一些输入是文本框,有些是单选按钮)。

到目前为止,我的代码如下:

$(document).ready(function() {
  $('.form:input').each(function() {
    if ($(this).val() != "") {
      $('.congrats').css("display", "block");
    }
  });
});
p.congrats {
  display: none;
}
<div class="form">
  <input type="text" />
  <br />
  <input type="text" />
</div>
<p class="congrats">Congrats!</p>

http://jsfiddle.net/7huEr/

晴空晴空提问于
jeeker回答于

这个使用jQuery的serializeArray函数,因此您不必担心检查不同类型的字段,也不必担心哪些字段可以被定义为空字段:

$.fn.isBlank = function() {
    var fields = $(this).serializeArray();

    for (var i = 0; i < fields.length; i++) {
        if (fields[i].value) {
            return false;
        }
    }

    return true;
};
Mr.Crypto构建人人信用社会。回答于
$(document).ready(function() {
    $(".form > :input").keyup(function() {
        var $emptyFields = $('.form :input').filter(function() {
            return $.trim(this.value) === "";
        });

        if (!$emptyFields.length) {
            console.log("form has been filled");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p>

扫码关注云+社区

领取腾讯云代金券