jQuery - flou de champs multiples

Question

Je travaille sur une validation de formulaire en utilisant jQuery, en validant chaque champ surblur. Tout fonctionne bien, sauf quand j'ai groupé des champs (dépendants). Ce que je cherche est un moyen de valider ces champs seulement une fois que tous ont été floutés. Ils peuvent être groupés en tant que collection d'objets jQuery ou enfants d'un élément conteneur.

Un exemple est une entrée d'anniversaire composé de trois éléments <> sélectionnez:

<fieldset> 
    <label for="bday_month">Birthday:</label> 
    <select name="userBirthday[month]" id="bday_month"> 
     <option value="0">Month</option> 
     <option value="1">January</option> 
     <option value="2">February</option> 
     <option value="3">March</option> 
     ... 
    </select> 
    <select name="userBirthday[day]" id="bday_day"> 
     <option value="0">Day</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     ... 
    </select> 
    <select name="userBirthday[year]" id="bday_year"> 
     <option value="0">Year</option> 
     <option value="1991">1991</option> 
     <option value="1990">1990</option> 
     <option value="1989">1989</option> 
     ... 
    </select> 
</fieldset> 

À l'heure actuelle, la fonction de validation est liée à l'événement flou() de chaque champ. Les champs groupés trouveront leurs dépendants et valideront correctement, mais lors de la tabulation dans les champs, le message d'erreur est affiché parce que l'utilisateur n'a pas fini l'entrée.

J'ai essayé d'ajouter l'événement blur() au fieldset et de lier des événements personnalisés, sans beaucoup de chance.

Pour référence, voici ce que j'ai actuellement la fonction blur():

fieldBlur = function(e){ 
    // Array of objects w/specific validation functions, arguments, etc. 
    validators = $(this).data('validators'); 

    // Process each validator separately 
    for(key in validators){ 
     validator = validators[key]; 

     $field = validator.$field; 

     // Extracts the value from grouped fields as an array 
     val = valHelper($field); 

     // Call one of the pre-defined validation functions 
     functionResponse = eval(validator.options.functionName + "(val, validator.options.functionArgs);"); 
      if(!functionResponse){ 
       validator.$error.find('.text').text(validator.options.errorMsg); 
       validator.$info.hide(); 
       validator.$error.show(); 

       e.preventDefault(); 
       break; // Only display the first error 
      } else { 
       validator.$error.hide(); 
      }     
     } 
    return true; 
}; 

Merci à l'avance, et laissez-moi savoir si plus de code/explication serait utile. Reliez l'événement de flou au seul dernier champ.

Answer 1

Enfin quelque chose a fonctionné. Je ferai de mon mieux pour le décrire ici.

1. événement blur() est attaché à chaque champ
2. Fonction hors de blur() appels setTimeout(function(){ fieldBlurHelper(e); }, 100);

3. dans fieldBlurHelper() Je vérifie pour voir si l'un des champs regroupés se concentrent actuellement w/une classe qui est appliquée à tous les élément qui a le focus:

   $ field.filter ('. hasFocus');

4. Si aucun des champs ont mise au point, je lance le validateurs

complète (simplifiée) Fonction fieldBlur:

fieldBlur = function(e){ 
    fieldBlurHelper = function(e){ 

     // Array of validation data (function name, args, etc.) 
     validators = $(e.target).data('validators');  
      for(key in validators){ 
       validator = validators[key]; 

       // $field contains all the dependent fields (determined on ready()) 
       $field = validator.$field; 

       // If any of the dependent fields have focus, don't bother with validation 
       if($field.filter('.hasFocus').length > 0){ break; } 

       // Extracts value as an array for all the dependent fields (.val() only returns the first) 
       val = valHelper($field); 

       functionResponse = eval(validDater.options.functionName + "(val, validDater.options.functionArgs);"); 
       if(!functionResponse){ 
        console.log('error!'); 
        break; // we only want to show the user one error at a time 
       } else { 
        console.log('valid!'); 
       }     
      } 
     }; 
    // running the function after the timeout allows the fields to lose focus 
    setTimeout(function(){ fieldBlurHelper(e); }, 100); 
}; 

Answer 2

Vous pouvez utiliser un sélecteur comme 'fieldset :input:last' pour y accéder sans trop de tracas. De cette façon, vous pouvez passer en toute sécurité à travers des éléments groupés et le formulaire ne vérifiera pas une erreur jusqu'à ce que le dernier ait été flouté.