Forme glissante fantaisie avec plus de validation

Question

J'utilise ce fancy sliding box et j'ai un problème avec la validation.Il a la validation par défaut pour vérifier où un champ est vide ou non mais je veux ajouter plus de validation comme deux champs spécifiques sont égaux ou non ou la longueur d'un champ spécifique est dans la longueur désirée ou non. J'ai édité le code mais face à un problème qui est quand un champ de navigation précédent a une erreur il ajoute également la classe d'erreur pour la navigation suivante bien qu'il a été rempli correctement.
Voici mon code (à noter que je ne sais pas bien jquery):

function validateStep(step) { 
    if(step == fieldsetCount) return; 

    var error = 1; 
    var hasError = false;  

    $('#formElem').children(':nthchild('+parseInt(step)+')') 
     .find(':input:not(button)') 
     .each(function() { 
      var $this = $(this); 
      var valueLength = jQuery.trim($this.val()).length; 

      //i don't know how to generate a specific field value using this keyword 
      var pas=$('#myPassword').val().length; 
      var pas1=$('#myPassword').val(); 
      var pas2=$('#VerifyPassword').val(); 

      var pin1=$('#mPin').val(); 
      var pin2=$('#vVPin').val(); 
      var pas_ok=1; 

      if(pas1 != pas2 || pin1 ! =pin2 || pas < 5) { 
       pas_ok=0; 
      } 

      if(valueLength == '' || pas_ok==0) { 
       hasError = true; 
       $this.css('background-color','#FFEDEF'); 
      } else { 
       $this.css('background-color','#FFFFFF'); 
      } 
    }); 

    var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a'); 
    $link.parent().find('.error,.checked').remove(); 

    var valclass = 'checked'; 

    if(hasError) { 
     error = -1; 
     valclass = 'error'; 
    } 

    $('<span class="'+valclass+'"></span>').insertAfter($link); 

    return error; 
} 

Voici ma forme:

<div id="steps"> 
    <form id="formElem" name="formElem" action="" method="post" > 
     <fieldset class="step"> 
      <legend>Account</legend> 
      <p> 
       <label for="password">Password</label> 
       <input type="password" name="myPassword" id="myPassword" value="<?=$myPassword;?>" AUTOCOMPLETE=OFF /> 
      </p> 
      <p> 
       <label for="password"> Verify Password</label> 
       <input type="password" name="VerifyPassword" id="VerifyPassword" value="<?=$VerifyPassword;?>" /> 
      </p> 
      <p> 
       <label for="password"> Your Personal Pin </label> 
       <input type="pin" name="mPin" id="mPin" value="<?=$mPin;?>" /> 
      </p> 
      <p> 
       <label for="password"> Verify Personal Pin </label> 
       <input type="pin" name="vVPin" id="vVPin" value="<?=$vVPin;?>" /> 
      </p>   
     </fieldset> 
    </form>   
</div> 

Answer 1

Ce que vous faites est de vérifier tous les champs d'entrée pour chaque chaque cycle encore completeley. .each() vous donne une entrée à la fois. Ce que vous voulez faire est de les différencier via id respectifs de l'entrée, puis exécutez les contrôles. Le code suivant vérifie la longueur de tous les 4 champs d'entrée et les marque en rouge si leur longueur est zéro et dans le cas des deux champs d'entrée de vérification, il vérifie également s'ils sont les mêmes que leurs champs d'entrée d'origine. Le code n'est pas testé, mais vous devriez avoir l'idée.

$('#formElem').children(':nthchild('+parseInt(step)+')') 
    .find(':input:not(button)') 
    .each(function() { 
     var $this = $(this); 
     var value = $this.val(); 
     var valueLength = jQuery.trim(value).length; 

     var pas_ok = 1; 
     var id = $this.attr("id"); 
     if (id === 'VerifyPassword') { 
      var password = $('#myPassword').val(); 
      var vPassword = value; 
      if (password !== vPassword) 
       pas_ok = 0; 
     } else if (id === 'vVPin') { 
      var pin = $('#mPin').val() 
      var vPin = value; 
      if (pin !== vPin || pin.length < 5) 
       pas_ok = 0; 
     } 

     if(valueLength === 0 || pas_ok === 0) { 
      hasError = true; 
      $this.css('background-color','#FFEDEF'); 
     } else { 
      $this.css('background-color','#FFFFFF'); 
     } 
    }); 

Sur une note latérale: Toujours utiliser === au lieu de == si vous comparez quelque chose en javascript.