Comment afficher le conteneur d'erreur de validation jQuery uniquement sur soumettre

Question

J'essaie de faire fonctionner le Validation plugin. Cela fonctionne bien pour les champs individuels, mais lorsque j'essaie d'inclure le code de démonstration pour le conteneur d'erreurs qui contient toutes les erreurs, j'ai un problème. Le problème est qu'il montre le conteneur avec toutes les erreurs quand je suis dans tous les champs, mais je voudrais afficher le conteneur d'erreur seulement quand l'utilisateur appuie sur le bouton soumettre (mais montre toujours des erreurs en ligne à côté du contrôle en perdant le focus).

Le problème est le message dans le conteneur. Lorsque j'ai enlevé le code comme mentionné dans la réponse ci-dessous pour le conteneur, la sortie du conteneur affiche simplement le nombre d'erreurs en texte brut.

Quel est le truc pour obtenir une liste de messages d'erreur détaillés? Ce que je voudrais est d'afficher "ERROR" à côté du contrôle en erreur lorsque l'utilisateur appuie sur le bouton de l'onglet, et d'avoir un résumé de tout à la fin quand il appuie sur soumettre. Est-ce possible?

Code avec toutes les entrées d'ici:

$().ready(function() { 
     var container = $('div.containererreurtotal'); 

     // validate signup form on keyup and submit 
     $("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) { 
      var err = validator.numberOfInvalids(); 
      if (err) { 
      container.html("THERE ARE "+ err + " ERRORS IN THE FORM") 
      container.show(); 
      } else { 
      container.hide(); 
      } 
     }).validate({ 
        rules: { 
          nickname_in: { 
            required: true, 
            minLength: 4 
          }, 
          prenom_in: { 
            required: true, 
            minLength: 4 
          }, 
          nom_in: { 
            required: true, 
            minLength: 4 
          }, 
          password_in: { 
            required: true, 
            minLength: 4 
          }, 
          courriel_in: { 
            required: true, 
            email: true 
          }, 
          userdigit: { 
            required: true 
          } 
        }, 
        messages: { 
          nickname_in: "ERROR", 
          prenom_in: "ERROR", 
          nom_in: "ERROR", 
          password_in: "ERROR", 
          courriel_in: "ERROR", 
          userdigit: "ERROR" 
        } 

        ,errorPlacement: function(error, element){ 
          container.append(error.clone()); 
          error.insertAfter(element); 
        } 

      }); 
    }); 

Answer 1

Vous trouverez la documentation de l'option méta dans http://docs.jquery.com/Plugins/Validation/validate#toptions

Si vous souhaitez afficher les erreurs à côté des entrées ET dans un conteneur d'erreur distinct, vous devrez remplacer le rappel errorPlacement.

De votre exemple:

... 
        courriel_in: "ERROR", 
        userdigit: "ERROR" 
      } 
      ,errorContainer: container 

      ,errorPlacement: function(error, element){ 
       var errorClone = error.clone(); 
       container.append(errorClone); 
       error.insertAfter(element)    
      } 

      // We don't need this options 
      //,errorLabelContainer: $("ol", container) 
      //,wrapper: 'li' 
      //,meta: "validate" 
    }); 
... 

Le paramètre error est un objet jQuery contenant une balise <label>. Le paramètre element est l'entrée dont la validation a échoué. Mise à jour

aux commentaires

Avec le code au-dessus du conteneur d'erreur des erreurs non claires parce qu'il contient une copie clonée. Il est facile de résoudre ceci si jQuery donne un événement "hide", mais il n'existe pas. Ajoutons un événement hide!

1. Nous avons d'abord besoin de la AOP plugin

2. Nous ajoutons un conseil pour la méthode cacher:

     jQuery.aop.before({target: jQuery.fn, method: "hide"}, 
          function(){ 
           this.trigger("hide"); 
          }); 
   

3. Nous lier l'événement cacher pour cacher l'erreur cloné:

    ... 
        ,errorPlacement: function(error, element){ 
         var errorClone = error.clone(); 
         container.append(errorClone); 
         error.insertAfter(element).bind("hide", function(){ 
          errorClone.hide(); 
         }); 
        } 
        ... 
   

Faites un essai

Answer 2

Je ne sais pas si le plug-in de validation fournit une option pour cela, mais vous pouvez probablement utiliser jQuery standard pour obtenir ce que vous voulez. Assurez-vous que vous êtes conteneur est d'abord caché, en définissant le style d'affichage sans pareil:

<div id="container" style="display:none;"></div> 

Ensuite, vous pouvez brancher des un événement onsubmit à la forme qui rendra le récipient visible dès qu'une tentative de soumettre le formulaire:

jQuery('#formId').onsubmit(function() { 
    // This will be called before the form is submitted 
    jQuery('#container').show(); 
}); 

Espérons que combiner cela avec votre code existant devrait faire l'affaire.

Answer 3

Je supprimerais la errorContainer puis intercepter la validation sur postback et y ajouter un conteneur d'erreur manuellement comme ceci:

$("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) { 
    var err = validator.numberOfInvalids(); 
    if (err) { 
    container.html("THERE ARE "+ err + " ERRORS IN THE FORM") 
    container.show(); 
    } else { 
    container.hide(); 
    } 
}).validate({ ... }) 

Answer 4

votre premier conteneur devrait utiliser un ID au lieu d'une classe .. (je vais supposer que ID est « containererreurtotal »)

Puis essayez ceci ..

$().ready(function() { 

     $('div#containererreurtotal').hide(); 

     // validate signup form on keyup and submit 
     $("#frmEnregistrer").validate({ 
      errorLabelContainer: "#containererreurtotal", 
      wrapper: "p", 
      errorClass: "error", 
      rules: { 
       nickname_in: { required: true, minLength: 4 }, 
       prenom_in: { required: true, minLength: 4 }, 
       nom_in: { required: true, minLength: 4 }, 
       password_in: { required: true, minLength: 4 }, 
       courriel_in: { required: true, email: true }, 
       userdigit: { required: true } 
      }, 
      messages: { 
       nickname_in: { required: "Nickname required!", minLength: "Nickname too short!" }, 
       prenom_in: { required: "Prenom required!", minLength: "Prenom too short!" }, 
       nom_in: { required: "Nom required!", minLength: "Nom too short!" }, 
       password_in: { required: "Password required!", minLength: "Password too short!" }, 
       courriel_in: { required: "Courriel required!", email: "Courriel must be an Email" }, 
       userdigit: { required: "UserDigit required!" } 
      }, 
      invalidHandler: function(form, validator) { 
       $("#containererreurtotal").show(); 
      }, 
      unhighlight: function(element, errorClass) { 
       if (this.numberOfInvalids() == 0) { 
        $("#containererreurtotal").hide(); 
       } 
       $(element).removeClass(errorClass); 
      }  

     }); 
    }); 

Je suis en supposant ici que vous voulez une balise <p> autour de chacune des erreurs individuelles. En général, j'utilise un conteneur <ul> pour le conteneur réel (au lieu de la div que vous avez utilisé appelé « containererreurtotal ») et un <li> pour chaque erreur (cet élément est spécifié dans la ligne « emballage »)

Si vous spécifiez #containererreurtotal comme display: none; dans votre CSS, alors vous ne avez pas besoin la première ligne dans la fonction prêt ($ ('div # containererreurtotal') cacher();.)

Answer 5

J'ai une solution légèrement différente:

jQuery(document).ready(function() { 
    var submitted = false; 
    var validator = jQuery("#emailForm").validate({ 
     showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = ""; 
       jQuery.each(errorList, function() { 
       summary += "<li><label for='"+ this.element.name; 
       summery += "' class='formError'>" + this.message + "</label></li>"; }); 
       jQuery("#errorMessageHeader").show(); 
       jQuery("#errorMessageHeader").children().after().html(summary); 
       submitted = false; 
      } 
      this.defaultShowErrors(); 
     },   
     invalidHandler: function(form, validator) { submitted = true; }, 
     onfocusout: function(element) { this.element(element); }, 
     errorClass: "formError", 
     rules: { 
      //some validation rules 
     }, 
     messages: { 
      //error messages to be displayed 
     }   
    }); 
}); 

Answer 6

Je résolu ce problème avec le code court suivant:

errorElement: "td", 
errorPlacement: function (error, element) { 
    error.insertAfter(element.parent()); 
} 

Ma structure est la suivante:

<table> 
    <tr> 
     <td>Name:</td> 
     <td><input type="text" name="name"></td> 
    </tr> 
</table> 

Alors mes erreurs seront désormais montré directement dans un <td> derrière mon <input>