Javascript 检查所有输入字段是否已用 jQuery 填写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8907835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check all input fields have been filled out with jQuery
提问by Liam
I have 3 divs, each with a dfew input fields and next button on. I want to write a snippet of jQuery that when the next button is clicked it checks to ensure all input fields WITHIN the same div as the button, are not null.
我有 3 个 div，每个都有一个 dfew 输入字段和下一个按钮。我想编写一个 jQuery 片段，当单击下一个按钮时，它会检查以确保与按钮位于同一 div 内的所有输入字段不为空。
I've tried the following with no luck but Im 100% certain its wrong, only I cant find the relevant information online...
我已经尝试了以下但没有成功，但我 100% 肯定它是错误的，只是我无法在网上找到相关信息......
回答by James Allardice
You could use filterto reduce the set of all inputelements to only those that are empty, and check the lengthproperty of what remains:
您可以使用filter将所有input元素的集合减少到仅那些为空的元素，并检查length剩余元素的属性：
$(".next").click(function() {
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
//At least one input is empty
}
});
Note that the definition of empty in the above code is an empty string. If you want to treat blank spaces as empty too, you may want to trim the value before comparing.
注意上面代码中empty的定义是一个空字符串。如果您也想将空格视为空，您可能需要在比较之前修剪该值。
Also note that there is no need to pass thisinto jQuery inside the filterfunction. The DOM element itself will have a valueproperty, and it's much faster to access that instead of using val.
另请注意，无需this在filter函数内部传入 jQuery 。DOM 元素本身将有一个value属性，访问它比使用val.
Here's an updated fiddle.
这是一个更新的小提琴。
回答by Alex Pliutau
$('.next').click(function() {
var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() { return $(this).val() == ""; });
if (emptyInputs.length) {
alert('Fail!');
}
});
回答by gaetanoM
Because there is no jQuery selector for this case you can extend jQuery's selector capabilities.
因为在这种情况下没有 jQuery 选择器，所以您可以扩展 jQuery 的选择器功能。
Assuming you select all :textelements, the extension is:
假设您选择所有:text元素，扩展名是：
$.extend($.expr[':'],{
isEmpty: function(e) {
return e.value === '';
}
});
Hence, you can select all empty text fields:
因此，您可以选择所有空文本字段：
$(this).closest('div').find(':text:isEmpty');
$.extend($.expr[':'], {
isEmpty: function (e) {
return e.value === '';
}
});
$('.next').click(function () {
var missingRequired = $(this).closest('div').find(':text:isEmpty');
console.log('Empty text fields: ' + missingRequired.length);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>回答by gaetanoM
$('.next').click(function() {
var inputs = $(this).parent().find('input[value=""]');
if (!inputs.length) {
// you have empty fields if this section is reached
}
});
