一次显示表单中缺少字段的错误消息

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初学者。