一次顯示錶單中缺少字段的錯誤消息

Question

我有一個包含許多字段的表單。在按下提交按鈕而不填寫字段詳細信息之後，我應該在字段下面一次顯示所有字段的錯誤消息。我該怎麼做？現在我正在使用警報，但我不想要它。以下是我的驗證代碼。現在我只顯示兩個字段：reg和車主。想要以紅色顯示錯誤消息：Please enter registration number below the field.在提交表單時，控件來到具有以下代碼的函數。

if(reg1 == "" || reg2 == "" || reg3 == "" || reg4 == "") 
{ 
    alert("Please Enter Proper Registration Number"); 
    return false; 
} 
else if(vRegisteredOwnerName == "") 
{ 
    //alert("Please enter registered owner's name"); 
    document.getElementById("vRegisteredOwnerName").style.borderColor="#FF0000" 

    return false; 
} 

Answer 1

1）更好地創建像

<div id='errorMsg'></div> 

2）代替alert()，可以在上述div元件內顯示錯誤消息的新div元素。

document.getElementById("errorMsg").innerHTML 
        = "Please Enter Proper Registration Number"; 

這裏是一個簡短的fiddle和以下是完整的代碼。

validate = function() { 
    reg = document.getElementById("reg").value; 
    vRegisteredOwnerName = document.getElementById("vRegisteredOwnerName").value; 
    errorModal = document.getElementById("errorMsg"); 

    if (reg == "") { 
     errorModal.innerHTML = "Please Enter Proper Registration Number";   
     if (vRegisteredOwnerName == "") { 
      //alert("Please enter registered owner's name"); 
      document.getElementById("vRegisteredOwnerName").style.borderColor = "red" 
      return false; 
     } 
    } 
} 

Answer 2

jQuery驗證演示鏈接：

http://jqueryvalidation.org/

這個插件是最好的jQuery初學者。