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

Jquery验证演示链接：

http://jqueryvalidation.org/

此插件最适合jquery初学者。

Answer 2

1）更好地创建一个新的div元素，如

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

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

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

2 个答案: