JavaScript验证不警告用户

时间:2013-11-15 17:02:04

标签: javascript html validation

我正在使用javascript来验证Web表单以提交到数据库,我已经编写了表单和验证,但它似乎不起作用。

当表单完成且有效时,它意味着在单独的HTML文件中转到成功页面,但如果它无效,则表单上的文本变为红色,弹出一个消息框并提醒用户认为它无效。在Chrome和IE上,它似乎显示错误,但仍然转到成功页面。消息框也没有出现,我只看到文本在进入成功页面之前变为红色。

我想知道如何解决这个问题。我在互联网上搜索但没有找到解决方案。

我有一个名为validateForm()的函数,它是一系列if语句,用于检查字段是否有效,如果不是,则将名为'result'的变量设置为false,最后,它发送警报消息并返回变量'result'。

我的提交按钮的代码在这里:

<input type="submit" name="submit" value="Submit" onclick="return validateForm();" />

成功页面在表单代码中设置为“操作”。

这是我的验证表格:

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

1 个答案:

答案 0 :(得分:0)

我创建了一个没有单选按钮的表单,并更改了函数调用。

我认为错误就在这里:

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

我将函数调用更改为onsubmit(因为我认为这是更好的做法)而return validateForm()只更改为validateForm()。你为什么要return声明?对我没有意义。

http://jsfiddle.net/rcsole/cqy7q/