Javascript 使用 jQuery 检查所有表单输入是否为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10517315/
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
Checking if ALL form inputs are empty with jQuery
提问by mmmoustache
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>回答by karim79
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>回答by Royi Namir
try this :
尝试这个 ：
$("#a").on('click',function () {
var bad=0;
$('.form :text').each(function(){
if( $.trim($(this).val()) == "" ) bad++;
});
if (bad>0) $('.congrats').css("display","block").text(bad+' missing');
else $('.congrats').hide();
});
<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" />回答by Big McLargeHuge
This one uses jQuery's serializeArrayfunction, so you don't have to worry about checking different types of fields or what qualifies as an empty field:
这个使用了 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;
};
回答by jbabey
$('#check').click(function () {
var allFilled = true;
$(':input:not(:button)').each(function(index, element) {
if (element.value === '') {
allFilled = false;
}
});
console.log(allFilled);
});<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" />回答by Jonathan Payne
jsFiddle: http://jsfiddle.net/7huEr/38/
jsFiddle：http: //jsfiddle.net/7huEr/38/
$(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();
}
});
});
});?
回答by jeromej
Modern Vanilla Solution:
现代香草解决方案：
// Returns True if all inputs are not empty
Array.from(document.querySelectorAll('#myform input')).every(
function(el){return el.value;}
)
