javascript：提交前验证表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27918843/
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
javascript: validate form before submit?
提问by James Daley
I would really appreciate anyone's help with this as I just can't seem to get it working. I am using a javascript code to check my form before it is submitted. I check for things like empty boxes.
我真的很感激任何人的帮助，因为我似乎无法让它工作。我正在使用 javascript 代码在提交之前检查我的表单。我检查空盒子之类的东西。
If boxes are empty then this should display a one of three divs which contains a standard error text.
如果框为空，则应显示包含标准错误文本的三个 div 之一。
“有一个错误”I have three different divs, div1 div2 and div3 which contain error statements. I have done this because I have divided my form into three sections. Therefore I want my javascript to perform three different checks on the three different sections in my form and if a error has occurred in which ever section then display div1 or div 2 or div3 for that section.
我有三个不同的 div，div1 div2 和 div3，它们包含错误语句。我这样做是因为我将表单分为三个部分。因此，我希望我的 javascript 对表单中的三个不同部分执行三种不同的检查，如果在哪个部分发生错误，则为该部分显示 div1 或 div 2 或 div3。
Section 1
<div 1>
<input = firstname>
<input = lastname>
<input = email>
<input = email2>
section 2
<div 2>
<input = contactnum>
<input = mobnum>
<input = postcode>
section 3
<div 3>
<input = compname>
<input = compreg>
here is my javascript code I am trying to put together but its not working, it submits the form without doing any checks. please can someone show me where I am going wrong.
这是我的 javascript 代码，我试图放在一起，但它不起作用，它提交了表单而不做任何检查。请有人告诉我我哪里出错了。
<script>
function validateForm() {
var a = document.forms["register"]["firstname"].value;
var b = document.forms["register"]["lastname"].value;
var c = document.forms["register"]["email"].value;
var d = document.forms["register"]["email2"].value;
if (a == null || a == "" || b == null || b == "" || c == null || c == ""|| d == null || d == "") {
$(".form_error").show();
$('html,body').animate({
scrollTop: $(".form_error").offset().top - 180
});
var e = document.forms["register"]["contactnum"].value;
var f = document.forms["register"]["mobnum"].value;
var g = document.forms["register"]["postcode"].value;
if (e == null || e == "" || f == null || f == "" || g == null || g == "") {
$(".form_error").show();
$('html,body').animate({
scrollTop: $(".form_error").offset().top - 180
});
var h = document.forms["register"]["compname"].value;
var i = document.forms["register"]["compreg"].value;
if (h == null || h == "" || i == null || i == "") {
$(".form_error").show();
$('html,body').animate({
scrollTop: $(".form_error").offset().top - 180
});
return false;
}
}
}
</script>
回答by Quentin Morrier
In the form tag there is a field onsubmitto specify your validation function. Something like that:
在表单标签中有一个字段onsubmit来指定您的验证功能。类似的东西：
<form name="myForm" onsubmit="return validateForm()" method="post">
<!-- your inputs -->
</form>
回答by brammekuhh
You should use event.preventDefault();in your if statement when you check for errors.
event.preventDefault();当您检查错误时，您应该在 if 语句中使用。
I you are clicking a submit button, first check all the fields, if something fails in your validation, raise event.preventDefault(). With this, this will prevent the form to submit.
我正在单击提交按钮，首先检查所有字段，如果验证失败，请提出event.preventDefault()。有了这个，这将阻止表单提交。
If there are no errors, the preventDefaultwill not be raised and the form will be submitted.
如果没有错误，preventDefault则不会引发并提交表单。
Extra information: jQuery API
额外信息： jQuery API
