使用JavaScript在onblur和按提交时验证表单

时间:2015-01-15 12:52:34

标签: javascript html forms validation onblur

我正在尝试使用JavaScript验证表单中的字段。当用户离开字段(onblur)和用户按下提交时,应验证字段。如果验证在必填字段上以任何方式失败,则不应发送表单。

问题是我还有一个JS函数,如果验证成功,应该重写一个经过验证的字段,然后发送表单。

这是我的HTML:

<head>
    <meta charset='UTF-8'>

    <script type="text/javascript" src="./library/checkcreateuser.js"></script>
    <script type="text/javascript" src="./library/hashcreateuser.js"></script>
</head>

<body>
    <div class="maindiv">
        <form name="createform" id="createform" onsubmit="return formhash();" action="#" method="post">
            <input type="text" name="email" id="email" onblur="checkEmail()" placeholder="E-postadress" maxlength="50" />
            <label for="email" id="labemail"></label><br />
            <input type="text" name="testemail" id="testemail" onblur="checkEmailConfirm()" placeholder="Bekräfta e-postadress" maxlength="50" /><br />
            <label for="testemail" id="labtestemail"></label><br />
            <br />
            ... other input fields that should be validated, not yet written ...
            <br />
            <input type="password" name="password" id="password" placeholder="Lösenord" maxlength="50" /><br />
            <label for="password" id="labpassword"></label><br />
            <input type="password" name="testpassword" id="testpassword" placeholder="Bekräfta lösenord" maxlength="50" /><br />
            <label for="testpassword" id="labtestpassword"></label><br />
            <br />
            <input type="submit" placeholder="Registrera" onclick="validateForm()"><br />
        </form>
    </div>
</body>

这是我的javascript验证:

function checkEmail() {
    var validemail = true;

    var email = document.getElementById("email");

    var divided = email.split("@");

    var divlen = divided.length;

    if (divlen != 2) {
        validemail = false;
        document.getElementById("labemail").innerHTML = "Felaktig e-postadress";
    } else {
        document.getElementById("labemail").innerHTML = "<font color='#00cc00'>Korrekt epostadress</font>";
    }

    // More code to validate Email to come

    return validemail;
}

function checkEmailConfirm() {
    var validtestemail = true;

    var email = document.getElementById("email");
    var testemail = document.getElementById("email");

    if (testemail != email) validtestemail = false;

    return validtestemail;
}


function validateForm() {
    var validform = true;
    var returnval = true;

    validform = checkEmail();
    if (validform == false) returnval = false;
    validform = checkEmailConfirm();
    if (validform == false) returnval = false;

    return returnval;
}

我的问题是当我离开email-或testemail-fields时没有任何反应。

我的第二个问题是,如果我希望表单未提交,如果任何验证失败,但是如果验证成功,则提交并使用名为formhash()的函数进行哈希处理,这是正确的方法吗?


编辑:使用Chrome调试器,我有以下错误:

Uncaught TypeError: undefined is not a function: checkcreateuser.js:9  
checkEmail: checkcreateuser.js:9  
onblur: newuser.php:16  

1 个答案:

答案 0 :(得分:2)

检查您应该使用的电子邮件和testemail中输入的值:

  var email = document.getElementById("email").value;
    var testemail = document.getElementById("testemail").value;// then use split on these values.

如果您将使用

var email = document.getElementById("email");//you will get error may be like split is not a function or something similar.