提交前验证表单

Question

我可以使用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
     }
 };

在上面使用匿名函数的例子中，当文档被提交时，我可以简单地分配返回值并防止页面被提交。而在下面的例子中，我使用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);

如何以这种方式返回值，以防止表单提交或提交表单？

- Sandeep

---

你可能需要考虑使用一个预先构建的JavaScript表单验证库。在JavaScript中进行手动验证非常麻烦。 - GordonM

很抱歉，我以为jQuery也是JavaScript库，所以使用jQuery的人可以回答这个问题。 - Sandeep

Answer 1

你在jQuery下发布了这个问题，所以我会给你提供一个jQuery的解决方案：

$('#myform').on('submit', function () {
    if($('#email').val() == ""){
        $('#errormessage').html("Please provide at least an email ");
        return false;
    } else {
        return true;
    }
});

请注意，在该示例中我使用了jQuery 1.7 .on() 函数，它替换了早期版本的 .bind() 函数。

--更新--

这是上述解决方案的 jsfiddle 链接：http://jsfiddle.net/jasper/LmaYk/

- Jasper

Answer 2

我认为你遇到的问题是因为你正在使用DOM Level 2事件注册和addEventListener，所以你可以在Firefox中使用event.preventDefault()，而在其他浏览器中使用event.returnValue=false。请尝试使用此演示：

http://jsfiddle.net/pYYSZ/42/

- Galled

Answer 3

使用类似这样的东西

<form ...... onsubmit="return your validationFunctionThatReturnTruOrFalse() " >

- Hossein