La validation de formulaire est interrompue lorsqu'une vérification est invalide en javascript

Question

J'ai un formulaire qui contient deux zones de texte, chacune concernant un groupe de 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> 

Et j'ai une fonction pour vérifier si un email est bien formaté, après nos normes internes.

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

Si un champ a est classe INVALID, le style suivant est appliqué:

.invalid 
{ 
background-color:#fffacd; 
} 

Lorsqu'une valeur est modifiée dans l'un des textarea, la fonction suivante est appelée, qui vérifier si l'une des valeurs n'est pas correctement formatée et, si c'est le cas, le bouton d'envoi est désactivé.

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

Le problème est, si le premier contrôle return false, le deuxième contrôle n'est pas fait, et s'il arrive que la valeur n'est pas formaté correctement, le changement est le style ne se fait pas. (mais le bouton de soumission est désactivé). Pourquoi les vérifications sont-elles interrompues?

Answer 1

Cette raison est la façon dont vous obtenez votre variable validform dans le dernier bit. JavaScript fonctionne comme beaucoup d'autres langues et n'aller plus loin dans un AND booléenne si elle ne peut pas être vrai:

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

Si le premier checkmail() est faux, alors il ne doit pas effectuer la seconde car il n'y a aucune possibilité que validform soit vrai. Si vous définissez var validform = false alors il ne fera même pas l'une des fonctions de checkmail.

Un exemple: http://jsfiddle.net/jonathon/Ndw9K/

Si vous voulez vous assurer que les deux sont appelés alors vous pouvez diviser et faire quelque chose comme ceci:

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

Sinon, vous pouvez changer votre méthode de façon à passe par tous les éléments que vous voulez valider et il change une variable et la retourne.

Un exemple de base:

function checkmailElements(myarray){ 
    var returnVal = true; 

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

    returnVal; 
}