jquery validieren plugin benutzerdefinierte Fehlerklasse als übergeordnete div

Question

Ich habe ein Formular, das Validierung mit jQuery validieren plugging.

Dies ist meine jQuery-Code für die Validierung:

$('#authForm').validate({ 
       rules: { 
        Email: { 
         required: true, 
         email: true 
        }, 
        Password: { 
         required: true 
        }, 
        PasswordAgain: { 
         equalTo: "#Password" 
        }, 
        Name: { 
         required: true 
        } 
       }, 
       errorClass: "invalid", 
       errorPlacement: function(error, element) { } 
      }); 

ich eine Errorclass hinzugefügt haben, die ich brauche, um ein Elternteil div anhängen, nicht auf das Eingabefeld:

Die HTML-Struktur einer der sind die Felder wie folgt aus:

<div class="form-group form-group-custom "> 
              <label>Email Address</label> 
              <input name="Email" type="text" class="form-control invalid" value="test@test.com" aria-required="true" aria-describedby="Email-error" aria-invalid="true"> 
             </div> 

Und wenn Sie die „invalid“ Klasse feststellen, hat mit dem Eingangselement angehängt worden, die tatsächlich richtig ist, aber ich muss Appen d es zu meiner <div class="form-group form-group-custom"> und auch entfernen, wenn die Validierung in Ordnung ist.

Irgendwelche Hinweise?

Answer 1

Die Funktionen highlight und unhighlight werden immer verwendet, um Klassen anzuwenden/zu entfernen, wenn die Dinge gültig/ungültig werden. Schreiben Sie einfach benutzerdefinierte jQuery-DOM-Traversalfunktionen, die target your parent div.

$('#authForm').validate({ 
    rules: { 
     .... 
    }, 
    .... 
    highlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass(validClass).removeClass(errorClass); 
    }, 
    .... 

Wenn die Klassen müssen aus den Klassen völlig getrennt sein, die vom Plugin automatisch angelegt werden, dann stattdessen die Schlüsselwörter verwenden, die die voreingestellten Klassen darzustellen, verwenden verschiedene Klassen umbenannt, wie Sie möchten.

highlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass('myerrorclass').removeClass('myvalidclass'); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass('myvalidclass').removeClass('myerrorclass'); 
    },