提交前验证表格

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在提交表单时添加事件，并由validate进一步评估功能。 我也将返回值设置为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);

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

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()函数。

--Update--

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

Answer 2

我认为发生您的问题是因为您将DOM Level 2事件注册表与addEventListener一起使用 ，因此可以将event.preventDefault()用于Firefox，将event.returnValue=false用于其他浏览器。 试试这个演示：

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

Answer 3

用这样的东西

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