在提交之前验证表单 [英] Validating form before submitting
问题描述
我可以使用JavaScript中的简单匿名函数提交表单并验证它,
document.getElementById('myForm')。onsubmit = function(){
if(document.getElementById('email')。value ==){
document.getElementById('errormessage') .innerHTML =请至少提供一个电子邮件地址;
返回false;
} else {
return true; //注意这个
}
};
在上面使用匿名函数的例子中,我可以在提交文档时简单地分配返回值,阻止在下面的示例中提交页面时,我使用 addEventListener
在提交表单时添加事件,并通过验证函数进一步评估该事件。我还将返回值设置为true或false,但这种方法似乎不起作用并且页面已提交。我想我是错误的返回值
function addEventHandler(node,evt,func){
if(node.addEventListener)
node.addEventListener(evt,func);
else
node.attachEvent(on+ evt,func);
}
函数initializeAll(){
addEventHandler(document.getElementById('myform'),'submit',validate);
}
function validate(){
if(document.getElementById('email')。value ==){
document.getElementById(errormessage)。innerHTML =请至少提供一封电子邮件;
返回false;
} else {
return true;
}
}
addEventHandler(window,'load',initializeAll);
如何以这种方式返回值以防止表单提交或提交表单?
我认为您的问题是因为您使用 DOM Level 2 Event Registraton with addEventListener ,因此您可以使用 事件.preventDefault()
用于Firefox和 event.returnValue = false
到其他浏览器。试试这个演示:
http:// jsfiddle。 net / pYYSZ / 42 /
I could submit a form and validate it using a simple anonymous function in javascript as,
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 addEventListener
to 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
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?
I think your problem occurs because you are using the DOM Level 2 Event Registraton with addEventListener, so you can use event.preventDefault()
for Firefox and event.returnValue=false
to other browsers. Try with this demo:
这篇关于在提交之前验证表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!