javascript 提交前验证表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8232639/
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
Validating form before submitting
提问by Sandeep
I could submit a form and validate it using a simple anonymous function in javascript as,
我可以提交一个表单并使用 javascript 中的一个简单的匿名函数来验证它，
document.getElementById('myForm').onsubmit = function() {
if(document.getElementById('email').value == "") {
document.getElementById('errormessage').innerHTML = "Please provide at least an email address";
return false;
} else {
return true; // Note this
}
};
In the example above using anonymous function, I could simply assign the return value when the document is submitted and prevent the page from being submitted while in the example below I use addEventListenerto add event when the form is submitted and it is further evaluated by validate function. I have also placed the return value to be true or false but this approach does not seem to work and the page gets submitted. I think I am wrong in returning the value
在上面使用匿名函数的示例中，我可以简单地在提交文档时分配返回值并防止页面被提交，而在下面的示例中，我使用addEventListener在提交表单时添加事件并通过验证函数进一步评估. 我还将返回值设置为 true 或 false，但这种方法似乎不起作用并且页面被提交。我认为返回值是错误的
function addEventHandler(node, evt, func) {
if(node.addEventListener)
node.addEventListener(evt, func);
else
node.attachEvent("on" + evt, func);
}
function initializeAll() {
addEventHandler(document.getElementById('myform'), 'submit', validate);
}
function validate() {
if(document.getElementById('email').value == ""){
document.getElementById("errormessage").innerHTML = "Please provide at least an email ";
return false;
} else {
return true;
}
}
addEventHandler(window, 'load', initializeAll);
How should I return value this way so as to prevent the form from submitting or submitting the form?
我应该如何以这种方式返回值以防止表单提交或提交表单？
采纳答案by Galled
I think your problem occurs because you are using the DOM Level 2 Event Registratonwith addEventListener, so you can use event.preventDefault()for Firefox and event.returnValue=falseto other browsers. Try with this demo:
我认为您的问题发生是因为您将DOM Level 2 Event Registraton与addEventListener 一起使用，因此您可以将其event.preventDefault()用于 Firefox 和event.returnValue=false其他浏览器。试试这个演示：
回答by Jasper
You posted this question under jQuery, so I'll throw out a jQuery solution for ya:
你在 jQuery 下发布了这个问题，所以我会为你抛出一个 jQuery 解决方案：
$('#myform').on('submit', function () {
if($('#email').val() == ""){
$('#errormessage').html("Please provide at least an email ");
return false;
} else {
return true;
}
});
Note that I used the jQuery 1.7 .on()function which in this case replaces the .bind()function of earlier versions.
请注意，我使用了 jQuery 1.7.on()函数，在这种情况下它替换了.bind()早期版本的函数。
--Update--
- 更新 -
Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/LmaYk/
这是上述解决方案的 jsfiddle：http: //jsfiddle.net/jasper/LmaYk/
回答by hossein barzegari
use somethin like this
使用这样的东西
<form ...... onsubmit="return your validationFunctionThatReturnTruOrFalse() " >
