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

Question

我有一个包含许多字段的表单。当我按下提交按钮而不填写字段详细信息后，我应该在字段下方立即显示所有字段的错误消息。我该怎么做？现在我正在使用警报，但我不想要它。下面是我的验证代码。现在我只显示两个字段:reg 和车主。想要以红色显示错误消息:请在字段下方输入注册号。提交表单后，控件将调用具有以下代码的函数。

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) 您可以在上面的 div 元素中显示错误消息，而不是 alert()。

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;
        }
    }
}