提交前驗證表格

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() " >