CODEWITHSUNDEEP
javascriptvalidation
Eldros
Eldros

Reputation: 561

Form validation is interrupted when one check is invalid in javascript

I've got a form which contains two textarea, each concerning a group of mails.

<form name="myform" action='entryupdate.php' method="post">
    <textarea name="mailgroup1" rows="2" cols="50" onchange="checkFormValue();">
    </textarea>
    <textarea name="mailgroup2" rows="2" cols="50" onchange="checkFormValue();">
    </textarea>
    <input name="update" type="submit" value="Update description"/>
</form>

And I've got a function to check if an email is well formated, after our internal norms.

function checkmail(component){
    var emailpattern = /^[A-z0-9\._-]+@[A-z0-9][A-z0-9-]*(\.[A-z0-9_-]+)*\.([A-z]{2,6})$/;
    var mails = component.value.split(/[\n\r\t ]+/);
    var valid = true;
    for(var i=0; i<mails.length; i++){
        valid = valid && emailpattern.test(mails[i]);
        alert("Mail: "+mails[i]+" Valid: "+ emailpattern.test(mails[i]));
    }
    if(valid){
        component.setAttribute('class', 'valid');
    }else{
        component.setAttribute('class', 'invalid');
    }
    return valid;
}

If a field has is class set to invalid, the following style is applied:

.invalid
{
background-color:#fffacd;
}

When a value is changed in one of the textarea, the following function is called, which check if any of the value is not correctly formated, and if it is the case, the submit button is disabled.

function checkFormValue(){
    var validform = true;
    validform = validform && checkmail(document.myform.mailgroup1) && checkmail(document.myform.mailgroup2);
    document.hotfixomat.update.disabled = !validform;
}

The problem is, if the first check return false, then the second check is not made, and if it happens that the value is not correctly formatted, then the change is style is not done. (but the submit button is disabled). Why are the checks interrupted?

Upvotes: 0

Views: 128

Answers (1)

Jonathon Bolster
Jonathon Bolster

Reputation: 15961

This reason for this is how you get your validform variable in the last bit. JavaScript works like many other languages and will not go any further in a boolean AND if it can't possibly be true:

var validform = true;
validform = validform && checkmail(document.myform.mailgroup1) && checkmail(document.myform.mailgroup2);

If the first checkmail() is false, then it doesn't have to perform the second one since there is no possible way that validform will be true. If you set var validform = false then it won't even do any of the checkmail functions.

An example: http://jsfiddle.net/jonathon/Ndw9K/

If you want to ensure that both are called then you can split it up and do something like this:

var validForm1 = checkmail(document.myform.mailgroup1),
    validForm2 = checkmail(document.myform.mailgroup2),
    validForm = validForm1 && validForm2;

Alternatively, you could change your method so that it goes through all the elements you want to validate and it changes a variable and returns that.

A basic example:

function checkmailElements(myarray){
    var returnVal = true;

    for(var i = 0; i< myarray.length; i++){
        if( !checkmail(myarray[i]) ){
            returnVal = false;
        }
    }

    returnVal;
}

Upvotes: 2

Related Questions