jQuery 当输入字段为空时使用jQuery防止表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17865148/
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
Using jQuery to prevent form submission when input fields are empty
提问by LNA
The solution should be pretty straightforward. I'm trying to prevent the form from submitting properly when no value is found within the input boxes. Here's my JSFiddle: http://jsfiddle.net/nArYa/7/
解决方案应该非常简单。当在输入框中找不到值时，我试图阻止表单正确提交。这是我的 JSFiddle：http: //jsfiddle.net/nArYa/7/
//Markup
//标记
<form action="" method="post" name="form" id="form">
<input type="text" placeholder="Your email*" name="email" id="email">
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name"
<button type="submit" id="signup" value="Sign me up!">Sign Up</button>
</form>
//jQuery
//jQuery
if ($.trim($("#email, #user_name").val()) === "") {
$('#form').submit(function(e) {
e.preventDefault();
alert('you did not fill out one of the fields');
})
}
As you can see in the JSFiddle, the problem is that when I type something into both fields, the alert box STILL pops up. I'm having a hard time figuring out why. Is there something wrong within my if($.trim($"#email, #user_name").val()) === "")?
正如您在 JSFiddle 中看到的，问题是当我在两个字段中输入内容时，警报框仍然会弹出。我很难弄清楚为什么。我的 if($.trim($"#email, #user_name").val()) === "") 有什么问题吗？
回答by koala_dev
Two things, #1 the check for empty fields should happen on every attempt of submit, #2 you need to check each field individually
两件事，#1 每次尝试提交时都应该检查空字段，#2 您需要单独检查每个字段
$('#form').submit(function() {
if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") {
alert('you did not fill out one of the fields');
return false;
}
});
回答by Manu Letroll
Your check occurs on page load. You need to check the field when the form is submitted.
您的检查发生在页面加载时。您需要在提交表单时检查该字段。
$('#form').submit(function(e) {
if ($.trim($("#email, #user_name").val()) === "") {
e.preventDefault();
alert('you did not fill out one of the fields');
}
});
回答by Elnaz
HTML5: use requiredin input tag
HTML5：在输入标签中 使用required
A boolean attribute.
Input field must be filled out before submittingthe form.
Works with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
<input required type='text'...>
一个布尔属性。
在提交表单之前必须填写输入字段。
适用于文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、收音机和文件。
<input required type='text'...>
回答by kitimenpolku
I guess that this will help:
我想这会有所帮助：
$('#form').submit(function(e) {
e.preventDefault();
$("#email, #user_name").each(function(){
if($.trim(this.value) == ""){
alert('you did not fill out one of the fields');
} else {
// Submit
}
})
})
回答by Jonny Sooter
Put your if statement inside the callback:
将您的 if 语句放在回调中：
$('#form').submit(function(e) {
if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) {
e.preventDefault();
alert('you did not fill out one of the fields');
//You can return false here as well
}
});
