JavaScript表單驗證 - 無法驗證多個字段

Question

我試圖得到一個表格按下提交按鈕時，多個字段進行驗證。

如果字段是無效的，那麼顯示該字段旁邊的消息。我可以看到其中一條無效消息出現，但不是全部。我正在使用的功能如下。

function checkForm() {   
    document.getElementById("test").onsubmit=function(){ 
     var title = document.getElementById("titles"); 
     if (title.selectedIndex == -1) { 
      return null; 
     } 

     var email = document.getElementById('email'); 
     //Regular Expression for checking email 
     var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 
     if (!emailRegEx.test(email.value)) { 
      document.getElementById("errEmail").style.display="inline"; 
      return false; 
     } 

     if(document.getElementById("fname").value==""){ 
      document.getElementById("errfName").style.display="inline"; 
      return false; 
     } 
     else { 
      return true; 
     } 

     if(document.getElementById("lname").value==""){ 
      document.getElementById("errlName").style.display="inline"; 
      return false; 
     } 
     else { 
      return true; 
     }  
    } 
} 

HTML下面

<form name ="reg" id="test"> 
    <fieldset id="controls"> 

    <div> 
    <label for="title">Title: </label> 
    <select id="titles"> 
     <option value="mr" selected="selected">Title</option> 
     <option value="mr">Mr.</option> 
     <option value="mrs">Mrs.</option> 
     <option value="ms">Ms.</option> 
     <option value="miss">Miss</option> 
    </select> 
    </div> 

    <div> 
     <label for="fname">First Name: </label> 
     <input id="fname" type="text"><span id="errfName" class="error">* Please Enter a First Name</span> 
    </div> 


    <div> 
     <label for="lname">Last Name: </label> 
     <input id="lname" type="text"><span id="errlName" class="error">* Please Enter a Last Name</span> 
    </div> 


    <div> 
     <label for="email">Email: </label> 
     <input id="email" type="text" size="40"><span id="errEmail" class="error">* Please enter a valid email</span> 
     </div> 
    <div> 
     <input type="submit" value="submit"> 
     </div> 
    </fieldset> 
</form> 
</body> 
</html> 

Answer 1

試試這個：

function checkForm() { 
    var errors = [];  
    document.getElementById("test").onsubmit=function(){ 
    var title = document.getElementById("titles"); 
    if (title.selectedIndex == -1) { 
     return null; 
    } 

    var email = document.getElementById('email'); 
    //Regular Expression for checking email 
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 
    if (!emailRegEx.test(email.value)) { 
     errors.push("errEmail"); 
    } 

    if(document.getElementById("fname").value==""){ 
     errors.push("errfName"); 
    } 

    if(document.getElementById("lname").value==""){ 
     errors.push("errlName"); 
    } 
    if(errors.length > 0){ 
     for(var i=0;i<errors.length;i++){ 
      document.getElementById(errors[i]).style.display="inline"; 
     } 
     return false; 
    }else{ 
     return true 
    } 
    } 
}