没有alert()的Javascript验证表单

Question

我正在尝试构建一个 HTML 表单，该表单将验证用户是否在每个输入框中输入了所有值。到目前为止，我在谷歌示例中发现，当用户将输入框留空时，它会调用alert()，如果用户必须填写大约10个框，然后意外地点击提交，现在他们必须关闭，这对用户来说很烦人10 个警报。我在想是否可以在空框旁边显示一条红色消息，指示哪些框是空的。 这是我的显示警报的代码:

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" />
    <input type="text" id="subject" name="subject" />
    <input type="text" id="examnumber" name="examNumber" />
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

JavaScript:

function validateForm(){
    var result = true;
    var msg = "";

    if(document.ExamEntry.name.value==""){
        msg+="You must enter your Name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }

    if(document.ExamEntry.subject.value==""){
        msg+="You must enter the Subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result = false;
    }

    if(document.ExamEntry.examNumber.value=="")
    {
        msg+="You must enter the Examination Number \n";
        document.ExamEntry.examNumber.focus;
        document.getElementById('examnumber').style.color="red";
        result = false;
    }

    if(document.ExamEntry.examNumber.value.length!=4)
    {
        msg+="Your Examination Number must be 4 characters long \n";
        document.ExamEntry.examNumber.focus;
        document.getElementById('examnumber').style.color="red";
        result = false;
    }

    var lvlmsg="";
    for(var i=0; i < document.ExamEntry.level.length; i++)
        {
            if(document.ExamEntry.level[i].checked)
            {
                lvlmsg = document.ExamEntry.level[i].value;
                break;
            }
        }
    if(lvlmsg=="")
        {
            msg+="You Must Indicate Your Level";
            result=false;
            document.getElementById('radioButtons').style.color="red";
        }
    else
        {
            alert(lvlmsg);
        }

    if(msg==""){
        return result;
    }
    else{
        alert(msg);
        return result;
    }
}

有什么想法吗？

Answer 1

在每个输入后创建一个 span 元素:

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

然后不要这样做:

msg+="You Must Indicate Your Level";

做:

var msg = document.createTextNode("You Must Indicate Your Level");
document.getElementById('name-msg').appendChild(msg);

并且不要忘记删除警报!