blocks|key|112931|text|使用each|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|112932|var+isValid;
$("input").each(function()+{
+++var+element+=+$(this);
+++if+(element.val()+==+"")+{
+++++++isValid+=+false;
+++}
});|code-block|syntax|javascript|112933|然而，您可能会更好地使用像jQuery+validate这样的东西，因为IMO更干净。|112934|entityMap^0|2|4|0|0|D|F|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Use <code>each</code>:</p>

<pre><code>var isValid;
$("input").each(function() {
   var element = $(this);
   if (element.val() == "") {
       isValid = false;
   }
});
</code></pre>

<p>However you probably will be better off using something like <code>jQuery validate</code> which IMO is cleaner. </p>


blocks|key|330404|text|只需使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330405|$("input:empty").length+==+0;|code-block|syntax|javascript|330406|如果它是零，则没有一个是空的。|330407|不过，为了更聪明一点，同时过滤掉只包含空格的项目，你可以这样做：|330408|$("input").filter(function+()+{
++++return+$.trim($(this).val()).length+==+0
}).length+==+0;|330409|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Just use:</p>

<pre><code>$("input:empty").length == 0;
</code></pre>

<p>If it's zero, none are empty.</p>

<p>To be a bit smarter though and also filter out items with just spaces in, you could do:</p>

<pre><code>$("input").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;
</code></pre>


blocks|key|112969|text|$('#form_submit_btn').click(function(){
++++$('input').each(function()+{
++++++++if(!$(this).val()){
++++++++++++alert('Some+fields+are+empty');
+++++++++++return+false;
++++++++}
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|112970|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#form_submit_btn').click(function(){
    $('input').each(function() {
        if(!$(this).val()){
            alert('Some fields are empty');
           return false;
        }
    });
});
</code></pre>


blocks|key|113001|text|你可以做it.here就是代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113002|<!DOCTYPE+html>
<html+lang="en">
+<head>
+<meta+charset="UTF-8">
+<title></title>
+<script+type="text/javascript"+src="http://code.jquery.com/jquery.min.js"></script>
<style>
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;}
textarea{height:auto;}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#ffffff;border:1px+solid+#cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset+0+1px+1px+rgba(0,+0,+0,+0.075);-moz-box-shadow:inset+0+1px+1px+rgba(0,+0,+0,+0.075);box-shadow:inset+0+1px+1px+rgba(0,+0,+0,+0.075);-webkit-transition:border+linear+0.2s,box-shadow+linear+0.2s;-moz-transition:border+linear+0.2s,box-shadow+linear+0.2s;-ms-transition:border+linear+0.2s,box-shadow+linear+0.2s;-o-transition:border+linear+0.2s,box-shadow+linear+0.2s;transition:border+linear+0.2s,box-shadow+linear+0.2s;}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82,+168,+236,+0.8);outline:0;outline:thin+dotted+\9;-webkit-box-shadow:inset+0+1px+1px+rgba(0,0,0,.075),+0+0+8px+rgba(82,168,236,.6);-moz-box-shadow:inset+0+1px+1px+rgba(0,0,0,.075),+0+0+8px+rgba(82,168,236,.6);box-shadow:inset+0+1px+1px+rgba(0,0,0,.075),+0+0+8px+rgba(82,168,236,.6);height:+20px;}
select,input[type="radio"],input[type="checkbox"]{margin:3px+0;*margin-top:0;line-height:normal;cursor:pointer;}
select,input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto;}
.uneditable-textarea{width:auto;height:auto;}
#country{height:+30px;}
.highlight
{
++++border:+1px+solid+red+!important;
}
</style>
<script>
function+test()
{
var+isFormValid+=+true;

$(".bs-example+input").each(function(){
++++if+($.trim($(this).val()).length+==+0){
++++++++$(this).addClass("highlight");
++++++++isFormValid+=+false;
++++++++$(this).focus();
++++}
++++else{
++++++++$(this).removeClass("highlight");
++++}
});

if+(!isFormValid)+{+
++++alert("Please+fill+in+all+the+required+fields+(indicated+by+*)");
}

++return+isFormValid;
+}++
+</script>
</head>
+<body>
+<div+class="bs-example">
<form+onsubmit="return+test()">
++++<div+class="form-group">
++++++++<label+for="inputEmail">Email</label>
++++++++<input+type="text"+class="form-control"+id="inputEmail"+placeholder="Email">
++++</div>
++++<div+class="form-group">
++++++++<label+for="inputPassword">Password</label>
++++++++<input+type="password"+class="form-control"+id="inputPassword"+placeholder="Password">
++++</div>
++++<button+type="submit"+class="btn+btn-primary">Login</button>
+++</form>
++</div>
+</body>
+</html>+|code-block|syntax|javascript|113003|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>You can do it.here is code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
&lt;style&gt;
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;}
textarea{height:auto;}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82, 168, 236, 0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);height: 20px;}
select,input[type="radio"],input[type="checkbox"]{margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;}
select,input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto;}
.uneditable-textarea{width:auto;height:auto;}
#country{height: 30px;}
.highlight
{
    border: 1px solid red !important;
}
&lt;/style&gt;
&lt;script&gt;
function test()
{
var isFormValid = true;

$(".bs-example input").each(function(){
    if ($.trim($(this).val()).length == 0){
        $(this).addClass("highlight");
        isFormValid = false;
        $(this).focus();
    }
    else{
        $(this).removeClass("highlight");
    }
});

if (!isFormValid) { 
    alert("Please fill in all the required fields (indicated by *)");
}

  return isFormValid;
 }  
 &lt;/script&gt;
&lt;/head&gt;
 &lt;body&gt;
 &lt;div class="bs-example"&gt;
&lt;form onsubmit="return test()"&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="inputEmail"&gt;Email&lt;/label&gt;
        &lt;input type="text" class="form-control" id="inputEmail" placeholder="Email"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="inputPassword"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control" id="inputPassword" placeholder="Password"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Login&lt;/button&gt;
   &lt;/form&gt;
  &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt; 
</code></pre>


blocks|key|113039|text|我只想指出我的答案，因为我知道for循环比$.each循环更快，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113040|只需将class="required"添加到需要的输入中，然后在jquery中执行以下操作：|113041|$('#signup_form').submit(function(){
++++var+fields+=+$('input.required');
++++for(var+i=0;i<fields.length;i%2B%2B){
++++++++if($(fields[i]).val()+!=+''){
++++++++++++//whatever
++++++++}
++++}
});|code-block|syntax|javascript|113042|entityMap^0|F|3|L|6|0|3|G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>I just wanted to point out my answer since I know <code>for</code> loop is faster then <code>$.each</code> loop
here it is:</p>

<p>just add <code>class="required"</code> to inputs you want to be required and then in jquery do:</p>

<pre><code>$('#signup_form').submit(function(){
    var fields = $('input.required');
    for(var i=0;i&lt;fields.length;i++){
        if($(fields[i]).val() != ''){
            //whatever
        }
    }
});
</code></pre>


blocks|key|330510|text|$('input').each(function()+{
++++if+($(this).val()+!=+'')+{
++++++++console.log('all+inputs+filled');
++++}
++++else{
++++++++console.log('theres+an+empty+input');
++++++++return+false
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|330511|您可能希望将其封装在keyup函数中|unstyled|330512|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('input').each(function() {
    if ($(this).val() != '') {
        console.log('all inputs filled');
    }
    else{
        console.log('theres an empty input');
        return false
    }
});
</code></pre>

<p>you might want to wrap this in a keyup function</p>


blocks|key|330521|text|如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330522|if+($('input[value=""]').length+>+0)+{
+++console.log('some+fields+are+empty!')
}|code-block|syntax|javascript|330523|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>Like this:</p>

<pre><code>if ($('input[value=""]').length &gt; 0) {
   console.log('some fields are empty!')
}
</code></pre>


blocks|key|330527|text|var+isValid+=+true;
$("#tabledata").find("#tablebody").find("input").each(function()+{
var+element+=+$(this);
if+(element.val()+==+"")+{
isValid+=+false;
}
else{
isValid+=+true;
}
});+
console.log(isValid);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|330528|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var isValid = true;
$("#tabledata").find("#tablebody").find("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
else{
isValid = true;
}
}); 
console.log(isValid);
</code></pre>


blocks|key|113117|text|让timer+$('input').on('input+change'，function+()+{+$('input').each(function+()+{+clearTimeout(+timer+)+timer=+setTimeout(()+)+=>+{+if+($(this).val()+!=+'')+{+console.log('all+input+filled')；}+else+{+console.log('theres+an+empty+input')；return+false+}+}，0)+})|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113118|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>let timer
$('input').on('input change', function () {
$('input').each(function () {
clearTimeout(timer)
timer = setTimeout(() =&gt; {
if ($(this).val() != '') {
console.log('all inputs filled');
} else {
console.log('theres an empty input');
return false
}
}, 0)
})
})</p>


<p>I need to validate a form with jQuery. I can check all my inputs one by one, but it's not a very practical solution.</p>

<p>How can i check if all my inputs are non-empty more efficiently? In my form i can have <code>input</code> elements of different types: text, several groups of radio, select etc.</p>


How to check if all inputs are not empty with jQuery

jQuery

我需要用jQuery验证一个表单。我可以逐个检查我的所有输入，但这不是一个非常实用的解决方案。如何更有效地检查所有输入是否是非空的？在我的表单中，我可以有不同类型的input元素:文本、几组单选按钮、select等。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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