Wie wird der jQuery-Validierungsfehlercontainer nur beim Senden angezeigt?

Question

Ich versuche, Validation plugin arbeiten zu lassen. Es funktioniert gut für einzelne Felder, aber wenn ich versuche, den Demo-Code für den Fehlercontainer aufzunehmen, der alle Fehler enthält, habe ich ein Problem. Das Problem ist, dass es den Container mit allen Fehlern zeigt, wenn ich in allen Feldern bin, aber ich möchte den Fehlercontainer nur anzeigen, wenn der Benutzer den Übergabeknopf drückt (aber immer noch Inline-Fehler neben dem Steuerelement zeigt, wenn der Fokus verloren geht).

Das Problem ist die Nachricht im Container. Als ich den Code, wie in der Antwort unten für den Container erwähnt, entfernt habe, zeigt die Containerausgabe nur die Anzahl der Fehler im Klartext an.

Was ist der Trick, um eine Liste detaillierter Fehlermeldungen zu erhalten? Was ich möchte, ist "ERROR" neben dem Steuerelement in Fehler anzuzeigen, wenn der Benutzer die Tabulatortaste drückt, und eine Zusammenfassung von allem am Ende, wenn er auf Senden drückt. Ist das möglich?

Code mit allen Eingaben von hier:

$().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

Sie die Dokumentation für die Meta-Option in http://docs.jquery.com/Plugins/Validation/validate#toptions

finden Wenn Sie die Fehler neben den Eingängen UND in einem separaten Fehlercontainer anzeigen möchten, müssen Sie den Callback errorPlacement überschreiben.

Von Ihrem Beispiel:

... 
        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" 
    }); 
... 

Der error Parameter ist ein jQuery-Objekt einen <label>-Tag enthält. Der Parameter element ist die Eingabe, bei der die Validierung fehlgeschlagen ist.

Update Kommentare

Mit dem obigen Code der Fehler Behälter wird nicht klar Fehler, weil es eine geklonte Kopie enthält. Es ist leicht zu lösen, wenn jQuery ein "hide" -Ereignis gibt, aber es existiert nicht. Lassen Sie uns ein Hide-Event hinzufügen!

1. Zuerst müssen wir die AOP plugin

2. Wir einen Rat für die Haut Methode hinzufügen:

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

3. Wir das Fell Ereignis binden die geklonte Fehler zu verbergen:

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

Probieren Sie es aus

Answer 2

Ich weiß nicht, ob die Validierung Plugin eine Option für diese bietet, aber Sie können wahrscheinlich Standard jQuery verwenden, um zu erreichen, was Sie wollen. Stellen Sie sicher, dass Sie Container zunächst versteckt, durch die Art der Anzeige zu keiner Einstellung:

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

Dann können Sie ein onsubmit Ereignis hookup zu der Form, die den Behälter sichtbar machen, sobald versucht wird, einreichen das Formular:

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

Hoffentlich kombinieren das mit Ihrem vorhandenen Code sollte den Trick tun.

Answer 3

Ich würde die errorContainer entfernen und dann abfangen die Validierung auf Postbacks und in ein Behälter-Fehler manuell wie folgt hinzu:

$("#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

zuerst Ihre Behälter sollte eine ID statt einer Klasse verwenden .. (ich diese ID zu übernehmen werde ist ‚containererreurtotal‘)

diese dann versuchen ..

$().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); 
      }  

     }); 
    }); 

Ich bin Angenommen, Sie möchten einen <p> Tag um jeden der einzelnen Fehler. Normalerweise verwende ich ein <ul> Behälter für den eigentlichen Behälter (anstelle des div Sie ‚containererreurtotal‘ genannt verwendet) und ein <li> für jeden Fehler (dieses Element wird in der „Wrapper“ Zeile angegeben)

Wenn Sie Geben Sie #containererreurtotal als Anzeige an: none; in Ihrem CSS, dann müssen Sie nicht die erste Zeile in der Ready-Funktion benötigen ($ ('div # containererreurtotal') verstecken();.)

Answer 5

ich eine etwas andere Lösung haben:

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

I gelöst dieses Problem mit dem folgenden kurzen Code:

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

Meine Struktur ist die folgende:

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

So meine Fehler werden jetzt direkt in einem <td> hinter meinem <input>

gezeigt