blocks|key|576473|text|这应该可以让你开始：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|576474|​|576475|$(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");
++++++++}
++++});
});|code-block|syntax|javascript|576476|<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>|576477|576478|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This should get you started:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".form &gt; :input").keyup(function() {
        var $emptyFields = $('.form :input').filter(function() {
            return $.trim(this.value) === "";
        });

        if (!$emptyFields.length) {
            console.log("form has been filled");
        }
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="form"&gt;
    &lt;input type="text" /&gt;&lt;br /&gt;
    &lt;input type="text" /&gt;
&lt;/div&gt;
&lt;p class="congrats"&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|360724|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360725|​|360726|$("#a").on('click',function+()+{
var+bad=0;
+$('.form+:text').each(function(){+
++++++++if(+$.trim($(this).val())+==+""+)+bad%2B%2B;+
++++++++++++
++++++++++
++++});
++++
++++if+(bad>0)+$('.congrats').css("display","block").text(bad%2B'+missing');+
++++else+$('.congrats').hide();+
});|code-block|syntax|javascript|360727|<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><input+style="width:100px"+value="check"+id="a"+type="button"+/>|360728|360729|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>try this : </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#a").on('click',function () {
var bad=0;
 $('.form :text').each(function(){ 
        if( $.trim($(this).val()) == "" ) bad++; 
            
          
    });
    
    if (bad&gt;0) $('.congrats').css("display","block").text(bad+' missing'); 
    else $('.congrats').hide(); 
});



 
   
 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="form"&gt;
    &lt;input type="text" /&gt;&lt;br /&gt;
    &lt;input type="text" /&gt;
&lt;/div&gt;
&lt;p class="congrats"&gt;&lt;/p&gt;&lt;input style="width:100px" value="check" id="a" type="button" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|360737|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360738|$('#check').click(function+()+{
++++var+allFilled+=+true;
++++
++++$(':input:not(:button)').each(function(index,+element)+{
++++++++if+(element.value+===+'')+{
++++++++++++allFilled+=+false;
++++++++}
++++});
++++
++++console.log(allFilled);
});|code-block|syntax|javascript|360739|<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>
<input+type="button"+id="check"+value="check"+/>|360740|360741|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#check').click(function () {
    var allFilled = true;
    
    $(':input:not(:button)').each(function(index, element) {
        if (element.value === '') {
            allFilled = false;
        }
    });
    
    console.log(allFilled);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="form"&gt;
    &lt;input type="text" /&gt;&lt;br /&gt;
    &lt;input type="text" /&gt;
&lt;/div&gt;
&lt;p class="congrats"&gt;&lt;/p&gt;
&lt;input type="button" id="check" value="check" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|360752|text|jsFiddle：http://jsfiddle.net/7huEr/38/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|360753|$(document).ready(+function()
{
++++//+Iterate+over+each+input+element+in+the+div
++++$('.form+input').each(function()
++++{
++++++++//+Add+event+for+when+the+input+looses+focus+(+ie:+was+updated+)
++++++++$(this).blur(+function()
++++++++{
++++++++++++//+Variable+if+all+inputs+are+valid
++++++++++++var+complete+=+true;

++++++++++++//+Iterate+over+each+input+element+in+div+again
++++++++++++$('.form+input').each(function()
++++++++++++{
++++++++++++++++//+If+the+input+is+not+valid
++++++++++++++++if+(+!$(this).val()+)
++++++++++++++++{
++++++++++++++++++++//+Set+variable+to+not+valid
++++++++++++++++++++complete+=+false;
++++++++++++++++}
++++++++++++});

++++++++++++//+If+all+variables+are+valid
++++++++++++if+(+complete+==+true+)
++++++++++++{
++++++++++++++++//+Show+said+congrats
++++++++++++++++$('.congrats').show();
++++++++++++}
++++++++});
++++});
});​|code-block|syntax|javascript|360754|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7huEr/38/^0|9|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>jsFiddle: <a href="http://jsfiddle.net/7huEr/38/" rel="nofollow">http://jsfiddle.net/7huEr/38/</a></p>

<pre><code>$(document).ready( function()
{
    // Iterate over each input element in the div
    $('.form input').each(function()
    {
        // Add event for when the input looses focus ( ie: was updated )
        $(this).blur( function()
        {
            // Variable if all inputs are valid
            var complete = true;

            // Iterate over each input element in div again
            $('.form input').each(function()
            {
                // If the input is not valid
                if ( !$(this).val() )
                {
                    // Set variable to not valid
                    complete = false;
                }
            });

            // If all variables are valid
            if ( complete == true )
            {
                // Show said congrats
                $('.congrats').show();
            }
        });
    });
});​
</code></pre>


blocks|key|576599|text|它使用了jQuery的serializeArray函数，所以您不必担心检查不同类型的字段或哪些字段符合空字段：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|576600|$.fn.isBlank+=+function()+{
++++var+fields+=+$(this).serializeArray();

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

++++return+true;
};|code-block|syntax|javascript|576601|entityMap^0|B|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>This one uses jQuery's <code>serializeArray</code> function, so you don't have to worry about checking different types of fields or what qualifies as an empty field:</p>

<pre><code>$.fn.isBlank = function() {
    var fields = $(this).serializeArray();

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

    return true;
};
</code></pre>


blocks|key|360838|text|现代香草解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360839|//+Returns+True+if+all+inputs+are+not+empty
Array.from(document.querySelectorAll('#myform+input')).every(
++++function(el){return+el.value;}
)|code-block|syntax|javascript|360840|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Modern Vanilla Solution:</p>

<pre><code>// Returns True if all inputs are not empty
Array.from(document.querySelectorAll('#myform input')).every(
    function(el){return el.value;}
)
</code></pre>


<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).</p>

<p>Here's my code so far:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $('.form:input').each(function() {
    if ($(this).val() != "") {
      $('.congrats').css("display", "block");
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>p.congrats {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form"&gt;
  &lt;input type="text" /&gt;
  &lt;br /&gt;
  &lt;input type="text" /&gt;
&lt;/div&gt;
&lt;p class="congrats"&gt;Congrats!&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/7huEr/" rel="noreferrer">http://jsfiddle.net/7huEr/</a></p>


Checking if ALL form inputs are empty with jQuery

jQuery

我正在尝试验证一个联系人表单，我想创建某种类型的‘表单已完成’消息，一旦每个输入字段都填好了(一些输入是文本框，一些是单选按钮)。到目前为止，我的代码如下：​$(document).ready(function() {  $('.form:input').each(function() {    if ($(this)...

问使用jQuery检查是否所有表单输入都为空
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery检查是否所有表单输入都为空EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery检查是否所有表单输入都为空
EN