JavaScript驗證失敗，但形式仍然提交

Question

我有以下的HTML表單把用戶輸入：

<form method = "post" action = "email.php" onsubmit = "return validateForm()" id = "form1"> 

     <div class = "page"> 
      <div class = "header"> 
       <p> 
        <span>CiHA Webinar Booking Form</span> 
        <img src = "lifespanLogo.png" class = "logo"> 
       </p> 
      </div> 

     <div class="splitter"></div> 

      <div class = "body"> 
       <div id = "wbForm"> 

        <p> 
         <label> 
          Webinar Date 
         </label> 

         <p> 
         <select name = "date" id = "date"> 
          <option value = "choose">---</option> 
          <option value = "Wednesday 22nd January">Wednesday 22nd January 2014</option> 
          <option value = "Wednesday 29th January">Wednesday 29th January 2014</option> 
         </select> 
         </p>     
        </p> 

        <p> 
         <label> 
          Name 
         </label> 

         <input name = "name" type = "text" id = "name"> 
        </p> 

        <p>  
         <label> 
          Organisation 
         </label> 

         <input name = "org" type = "text" id = "org"> 
        </p> 

        <p>  
         <label> 
          Email Address 
         </label> 

         <input name = "email" type = "text" id = "email"> 
        </p> 

        <p id="divButtonBar"> 
         <input type="submit" name="submit" value="Submit"> 
        </p> 

       </div> 
      </div> 

      <div class="footer"> 
       &copy;Property Tectonics 2014 
      </div> 
     </div>     
    </form> 

通過這個JavaScript函數在一分鐘只檢查是否字段爲空或不進行驗證：

<script> 

    function validateForm() { 
     if (validateDate()) { 
      if (validateName()) { 
       if (validateOrg()) { 
        if (validateEmail()) { 
         return true; 
        } 
       } 
      } 
     } 

     else { 
      return false; 
     } 
    } 

    function validateDate(){ 
     var date = document.forms["form1"]["date"].value; 

     if (date.trim().length == 0) { 
      element = document.getElementById("date"); 
      alert("Please choose a date"); 
      element.focus(); 
      return false; 
     } 

     else { 
      return true; 
     } 
    } 

    function validateName(){ 
     var name = document.forms["form1"]["name"].value; 

     if (name.trim().length == 0) { 
      element = document.getElementById("name"); 
      alert("Please enter your name"); 
      element.focus(); 
      return false; 
     } 

     else { 
      return true; 
     } 
    } 

    function validateOrg(){ 
     var org = document.forms["form1"]["org"].value; 

     if (org.trim().length == 0) { 
      element = document.getElementById("org"); 
      alert("Please enter your organisation"); 
      element.focus(); 
      return false; 
     } 

     else { 
      return true; 
     } 
    } 

    function validateEmail(){ 
     var email = document.forms["form1"]["email"].value; 

     if (email.trim().length == 0) { 
      element = document.getElementById("email"); 
      alert("Please enter your email address"); 
      element.focus(); 
      return false; 
     } 

     else { 
      return true; 
     } 
    } 
</script> 

然而，當我特意將字段留空時，表單仍然提交併前進到email.php。這裏有幫助嗎？我只是看不到這個問題。

感謝

Answer 1

您不必else子句您的許多if報表：

function validateForm() { 
    if (validateDate()) { 
     if (validateName()) { 
      if (validateOrg()) { 
       if (validateEmail()) { 
        return true; 
       } else { 
        return false; 
       } 
      } else { 
       return false; 
      } 
     } else { 
      return false; 
     } 
    } 

    else { 
     return false; 
    } 
} 

或者你可以更簡單地寫爲：

function validateForm() { 
    if (validateDate() && validateName() && validateOrg() && validateEmail()) { 
     return true; 
    } 
    else { 
     return false; 
    } 
} 

甚至爲：

function validateForm() { 
    return (validateDate() && validateName() && validateOrg() && validateEmail()); 
} 

Answer 2

如果你舒適的加入jQuery來此，你可以使用

$("#form1").submit(function(e) { 
    e.preventDefault(); 
    if(validateForm()) { 
     // submit the form 
    } 
}); 

看到用jQuery支持的例子小提琴：http://jsfiddle.net/2BmY8/

Answer 3

此代碼：

function validateForm() { 
     if (validateDate()) { 
      if (validateName()) { 
       if (validateOrg()) { 
        if (validateEmail()) { 
         return true; 
        } 
       } 
      } 
     } 

     else { 
      return false; 
     } 
    } 

僅會返回false，如果validateDate（）是假的。

而是嘗試類似：

function validateForm() { 
    if (validateDate() && validateName() && validateOrg() && validateEmail()) { 
        return true; 
    } 
    else { 
     return false; 
    } 
} 

Answer 4

沒有else { return false; }條件爲​​，validateOrg()或validateEmail()結構。他們沒有明確地返回false，而是他們什麼都不做（這足以讓表單提交）。