在提交之前首先檢查錯誤

Question

我有一個表單，我希望它通過try-catch塊加上兩個其他函數進行驗證和驗證。 以下是我有： HTML：

<h5>Please enter your name below</h5> 

<form name="textForm"> 
    <label for="name">First name:</label> 
    <input type="text" name="fname" id="name"> 
</form> 

<h5>Please enter your e-mail below</h5> 

<form name="mailForm"> 
    <label for="email">Email:</label> 
    <input type="email" name="email" id="email"> 
</form> 
    <form action=""> 
<label for="height">Your height:</label> 
<input type="text" placeholder="in centimetres" name="personHeight" id="height" /> 
<br></br> 
<input formaction="mailto:test@gmail.com" onclick="heightCheck();validateTextForm();validateMailForm();" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" /> 
<br></br> 
<p id="mess"></p> 
    </form> 

JS：

function validateTextForm() { 
    var x = document.forms["textForm"]["fname"].value; 
    if (x == null || x == "") { 
     alert("First name must be filled out"); 
     return false; 
    } 
} 

function validateMailForm() { 
    var z = document.forms["mailForm"]["email"].value; 
    var atpos = z.indexOf("@"); 
    var dotpos = z.lastIndexOf("."); 
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 
} 

function heightCheck() { 
    try { 
     var x = document.getElementById("height").value;  
     if (x == "")    
     throw "enter your height";  
     if (isNaN(x)) throw "not a number"; 
     if (x > 250)     
     throw "height is too high"; 
     if (x < 80)      
     throw "height is too low";  
    } catch (err) { 
     var y = document.getElementById("mess"); 
     y.innerHTML = "Error: " + err + ".";  
    } 
} 

，我希望它發生的事情是這樣的：首先，它的形式驗證，但之後如果其正確，則提交。 我試圖在實際提交之前先驗證表單，但沒有成功。 雖然瀏覽我發現它可以通過stopPropaganation,preventDefault或return false方法完成，但仍然不知道如何使它發生。 我會代表幫助我的人。提前致謝！ 小提琴：然而，在撥弄它運行不正常，因爲它應該：http://jsfiddle.net/5T9sJ/

Answer 1

您需要按照我的版本更改代碼：

... 
<input formaction="mailto:test@gmail.com" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" /> 
... 

然後讓processValidate方法把所有其他的驗證包進去：

$(document).ready(function() { 
    $('input#submit').click(function (e) { 
     e.preventDefault(); 
     validateTextForm(); 
     validateMailForm(); 
     heightCheck(); 
    }); 

    function validateTextForm() { 
     var x = document.forms["textForm"]["fname"].value; 
     if (x === null || x === "") { 
      alert("First name must be filled out"); 
      return false; 
     } 
    } 

    function validateMailForm() { 
     var z = document.forms["mailForm"]["email"].value; 
     var atpos = z.indexOf("@"); 
     var dotpos = z.lastIndexOf("."); 
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) { 
      alert("Not a valid e-mail address"); 
      return false; 
     } 
    } 

    function heightCheck() { 
     try { 
      var x = document.getElementById("height").value; 
      if (x === "") throw "enter your height"; 
      if (isNaN(x)) throw "not a number"; 
      if (x > 250) throw "height is too high"; 
      if (x < 80) throw "height is too low"; 
     } catch (err) { 
      var y = document.getElementById("mess"); 
      y.innerHTML = "Error: " + err + "."; 
     } 
    } 

}); 

說明：

你有幾種方法綁定在提交輸入類型，所以點擊它總是會調用表單提交。

我爲此操作添加了jQuery click處理程序以防止提交按鈕的默認操作。

我認爲e.preventDefault()適合這裏最好的。

工作演示：http://jsfiddle.net/rbegf/