javascript - 一次显示表单中缺失字段的错误消息

Question

我有一个包含许多字段的表单。在我按下提交按钮而不填写字段详细信息后，我应该在字段下方立即显示所有字段的错误消息。我该怎么做？现在我正在使用警报，但我不想要它。下面是我的验证代码。现在我只显示两个字段：注册和车主。想要以红色显示错误消息：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 元素，如

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

2) 代替alert()，您可以在上述div元素中显示错误消息。

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

这是一个简短的小提琴，下面是完整的代码。

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