jQuery 提交前jQuery检查输入不为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8402147/
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
jQuery check inputs not empty before submit
提问by Osu
I've been looking at different threads about how to do this and got the following script together, however, even when I type into the inputs so they're not empty, I'm getting the alert pop up and the form doesn't submit.
我一直在查看有关如何执行此操作的不同线程并将以下脚本放在一起，但是，即使我输入输入以使它们不为空，我也会弹出警报并且表单没有提交。
Can anyone see what I'm doing wrong or if there's a simpler / more efficient way of doing this?
任何人都可以看到我做错了什么，或者是否有更简单/更有效的方法来做到这一点？
Thanks,
谢谢，
Osu
大须
HTML:
HTML：
<form action="#" method="post" class="signup-form">
<div class="required">
<label for="name">Name:</label>
<input type="text" name="cm-name" id="name" value=""><br />
</div>
<div class="required">
<label for="asd-asd">Email:</label>
<input type="text" name="cm-asd" id="asd-asd" value="">
<span class="btn"><input type="submit" name="submit" value="" id="signup"></span>
</div>
</form>
JS:
JS：
// Validate form fields in Sign up form
$(".signup-form").submit(function(){
var isFormValid = true;
$(".signup-form .required input").each(function(){
if ($.trim($(this).val()).length == 0){
$(this).parent().addClass("highlight");
isFormValid = false;
} else {
$(this).parent().removeClass("highlight");
}
});
if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
return isFormValid;
});
回答by Osu
Thanks for the answers, however, I found that the reason I was getting the error message was because the submit button had no value i.e. value="", so it was checking that input too. In order to rectify the problem, I had to make sure the submit function was checking only 'text' input types:
感谢您的回答，但是，我发现我收到错误消息的原因是因为提交按钮没有值，即 value=""，因此它也在检查该输入。为了纠正这个问题，我必须确保提交函数只检查“文本”输入类型：
New JS:
新JS：
// Validate form fields in Sign up form
$(".signup-form").submit(function(){
var isFormValid = true;
$(".signup-form .required input:text").each(function(){ // Note the :text
if ($.trim($(this).val()).length == 0){
$(this).parent().addClass("highlight");
isFormValid = false;
} else {
$(this).parent().removeClass("highlight");
}
});
if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
return isFormValid;
});
回答by erimerturk
$('#signup').click(function(event) {
event.preventDefault();
//validate and if it is valid serialize the form
//else alert and return
var isFormValid = true;
$(".signup-form .required input").each(function(index, value){
if ($.trim($(value).val()).length == 0){
$(value).parent().addClass("highlight");
isFormValid = false;
} else {
$(value).parent().removeClass("highlight");
}
});
if(isFormValid ){
$.post( 'validation.php', $('.signup-formt').serialize(), function( data ) {
});
}else{
alert("Please fill in all the required fields (highlighted in red)");
}
});
回答by Ernestas Stankevi?ius
$('input').each(function(index, obj){
if($(obj).val().length === 0) {
$(obj).addClass('error');
}
});
But I dont remember would it be objor this.
但我不记得是obj还是this。
回答by Kareem
.each runs the script multiple times. for example if you have 3 empty inputs the script you are using adds class .highlight 3 times. if you want to keep your page light and clean give the script below a go.
.each 多次运行脚本。例如，如果您有 3 个空输入，您正在使用的脚本会添加类 .highlight 3 次。如果你想保持你的页面简洁干净，请使用下面的脚本。
check = function()
{
var empty = $(".signup-form .required input").filter(function() {
return this.value == ""; });//this checks if 1 or more inputs have no value
if(empty.length) {//to be applied if at least 1 input has no value
alert("Please fill in all the required fields (highlighted in red)");
$(".signup-form").addClass("highlight");
}else{
$(".signup-form").removeClass("highlight");
};}
This will alert the message ONCE if at least one input is empty. then simply add the function onclick to your submit input or any button you want to validate the form with.
如果至少有一个输入为空，这将提醒消息 ONCE。然后只需将 onclick 函数添加到您的提交输入或您想要验证表单的任何按钮。
<input type="submit" value="submit" onclick="check();">
