Affichage des messages d'erreur récapitulatifs et individuels à l'aide du plug-in de validation jQuery

Question

Comment puis-je afficher à la fois des messages d'erreur individuels et un résumé pour le plugin jQuery?

En fait, j'ai trouvé a similar question, mais il ne fait référence qu'à des crochets que je peux utiliser, mais je ne sais pas par où commencer. J'ai reçu la partie affichant les messages d'erreur individuels, mais j'ai besoin d'afficher le résumé dans une boîte d'alerte sur soumettre, et le plugin peut être trouvé here.

Je viens de découvrir comment, merci pour le code de David, et sur ma question de suivi - La boîte d'alerte serait "Prénom: S'il vous plaît entrer un prénom valide".

code ci-dessous:

$(document).ready(function() { 
    var submitted = false; 
    ('.selector').validate({ 
     showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = "You have the following errors: \n"; 
       $.each(errorMap, function(key, value) { 
       summary += key + ': ' + value + "\n"; 
       }); 
       alert(summary); 
       submitted = false; 
      } 
      this.defaultShowErrors(); 
     }, 
     invalidHandler: function(form, validator) { 
      submitted = true; 
     } 
    }); 
}); 

Answer 1

Comme le dit la question liée, le rappel showErrors est appelée à chaque fois que les erreurs sont affichées. Vous pouvez l'utiliser pour créer votre résumé et l'alerter. Vous pouvez ensuite appeler this.defaultShowErrors() pour afficher les messages d'erreur individuels normaux.

Par défaut showErrors est appelé pour beaucoup d'événements (soumettre, keyup, flou, etc.). Vous pouvez les désactiver ou utiliser la méthode invalidHandler qui est appelée uniquement lorsqu'un formulaire incorrect est soumis.

Exemple:

$(document).ready(function() { 
    var submitted = false; 
    ('.selector').validate({ 
     showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = "You have the following errors: \n"; 
       $.each(errorList, function() { summary += " * " + this.message + "\n"; }); 
       alert(summary); 
       submitted = false; 
      } 
      this.defaultShowErrors(); 
     },   
     invalidHandler: function(form, validator) { 
      submitted = true; 
     } 
    }); 
}); 

Voir here pour obtenir une liste complète des options qui peuvent être transmis à la méthode validate.