Проверка формы прерывается, когда одна проверка недействительна в JavaScript

Question

У меня есть форма, которая содержит две текстовые области, каждая из которых относится к группе писем.

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

И у меня есть функция, чтобы проверить, правильно ли отформатировано письмо, после наших внутренних норм.

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

Если для поля установлено недопустимое значение класса, применяется следующий стиль:

.invalid
{
background-color:#fffacd;
}

Когда значение изменяется в одной из текстовых областей, вызывается следующая функция, которая проверяет, правильно ли отформатировано какое-либо из значений, и, если это так, кнопка отправки отключается.

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

Проблема в том, что если первая проверка возвращает false, то вторая проверка не выполняется, и если случается, что значение неправильно отформатировано, то изменение стиля не выполняется. (но кнопка отправки отключена). Почему чеки прерываются?

Answer 1

Эта причина, по которой вы получаете переменную validform в последнем бите. JavaScript работает, как и многие другие языки, и не будет идти дальше в логическом AND, если это не может быть правдой:

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

Если первое checkmail() является ложным, тогда не нужно выполнять второе, поскольку нет никакого возможного способа, которым validform будет истинным. Если вы установите var validform = false, он даже не будет выполнять какие-либо функции контрольной почты.

Пример: http://jsfiddle.net/jonathon/Ndw9K/

Если вы хотите убедиться, что оба они вызваны, вы можете разделить их и сделать что-то вроде этого:

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

Кроме того, вы можете изменить свой метод так, чтобы он проходил через все элементы, которые вы хотите проверить, и изменял переменную и возвращал ее.

Базовый пример:

function checkmailElements(myarray){
    var returnVal = true;

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

    returnVal;
}