使用jQuery检查所有表单输入是否为空 [英] Checking if ALL form inputs are empty with jQuery

问题描述

我试图验证联系人表单，并且每填写一个输入字段（某些输入是文本框，其中一些是单选按钮），我想创建一些表单填写消息。

以下是我的代码：

 <$ （$（this）.val（）！=）{$（' .congrats'）。css（display，block）;}}）;}）;  

  p.congrats {display：none;}  

 < div class =form> < input type =text/> < br /> < input type =text/>< / div>< p class =congrats>恭喜！< / p>  

http://jsfiddle.net/ 7huEr /

解决方案

<

  $（document）.ready（function（）{$（。form> input）。 {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 =形成& GT; < input type =text/>< br /> < input type =text/>< / div>< p class =congrats>< / p>  

I'm trying to validate a contact form and I want to create some sort of 'form completed' message once every input field has been filled in (some of the inputs are text boxes, some are radio buttons).

Here's my code so far:

$(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/

解决方案

This should get you started:

$(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>

这篇关于使用jQuery检查所有表单输入是否为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！