2011-11-22 144 views
2

之前,我可以提交一個表單,並在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); 

我該如何返回值以防止表單提交或提交表單?

+0

你可能要考慮使用預先內置的JavaScript表單驗證庫。在JavaScript中進行手動驗證是史詩比例的PITA。 – GordonM

+0

我很抱歉,但我認爲jquery也是JavaScript庫,所以人們使用jQuery可以給這個答案。 – Sandeep

回答

4

您發佈的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/

1

使用事端這樣

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