Using JavaScript to validate form both onblur and when pressing submit

Question

I'm trying to validate fields in a form using JavaScript. The fields should be validated either when the user leaves a field (onblur) and when the user presses submit. The form should not be sent if the validation fails in any way on a required field.

The thing is I also have a JS function that if validation succeeds, should rewrite one of the fields that is validated, and send the form.

This is my 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>

And this is my javascript for validation:

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

My problem is that nothing happens when i leave the email- or testemail-fields.

My second question is, if I want the form not submitted if any of the validations fails, but submitted and also hashed using the function called formhash() if the validations succeeds, is this the correct way?

EDIT: Using the Chrome debugger, i have the following errors:

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

Answer 1

to check for the value entered in email and testemail you should use:

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

if you will use

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

Using JavaScript to validate form both onblur and when pressing submit

Question

1 answers

solution1
2 ACCPTED 2015-01-15 13:24:14

Using JavaScript to validate form both onblur and when pressing submit

Question

1 answers

solution1 2 ACCPTED 2015-01-15 13:24:14

solution1
2 ACCPTED 2015-01-15 13:24:14