jQuery-Validierungs-Plugin: Rufen Sie die errorPlacement-Funktion auf, wenn onfocusout, keyup und click

Question

Ich verwende das jquery-Validierungs-Plugin und möchte die errorPlacement-Funktion verwenden, um Fehlermeldungen zum Feld title attribute hinzuzufügen und nur ein ✘ neben dem Feld anzuzeigen.

Dies funktioniert gut, wenn das Formular mit dem Absenden-Button vorgelegt wird aber, wenn eines der folgenden Ereignisse ausgelöst werden: - onfocusout - klicken - onkeyup

Die Validierungsprüfungen ausgeführt werden, aber es überspringt die errorPlacement Funktion und fügt die vollständige Fehlermeldung nach dem Feld hinzu, wie das Standardverhalten.

Ich verwende den folgenden Code ein:

$("#send-mail").validate({ 
    debug: true, 
    // set this class to error-labels to indicate valid fields 
    success: function(label) { 
     // set text as tick 
     label.html("✔").addClass("valid"); 
    }, 
    // the errorPlacement has to take the table layout into account 
    errorPlacement: function(error, element) { 
     console.log("errorPlacement called for "+element.attr("name")+" field"); 
     // check for blank/success error 
     if(error.text() == "") 
     { 
      // remove field title/error message from element 
      element.attr("title", ""); 
      console.log("error check passed"); 
     } 
     else 
     { 
      // get error message 
      var message = error.text(); 

      // set as element title 
      element.attr("title", message); 

      // clear error html and add cross glyph 
      error.html("✘"); 

      console.log("error check failed: "+message); 
     } 
     // add error label after form element 
     error.insertAfter(element); 
    }, 
    ignoreTitle: true, 
    errorClass: "invalid" 
}); 

Answer 1

Ihr Problem ist, dass das Plugin nur ruft die errorPlacement Funktion einmal für jedes Element, das überprüft wird. Namly, wenn die Fehlerbeschriftung für das Element zuerst erstellt wird. Danach verwendet das Plugin nur das bereits vorhandene Label und ersetzt einfach das HTML darin (oder verbirgt das Fehlerlabel, wenn das Element jetzt gültig ist). Deshalb wird Ihr Kreuz entfernt und die eigentliche Fehlermeldung wird angezeigt.

Nur um sicherzustellen, dass der Fluss des Plugins klar ist.

1. Element (kein errorlabel noch)
2. Element wird an einem gewissen Punkt validierten
3. Plugin Fehler Etikett erstellt und ruft errorPlacement Funktion
4. Element "Kreuz" (Fehlermeldung in title)
5. Element bekommt Fokus und Sie ändern etwas
6. Plugin Revalidates Element
7. Sieht, dass Fehler-Label wurde bereits erstellt (und platziert)
8. Plugin ruft nur label.html(message) statt alte Etikett entfernt und

Sie sehen also Ihr Problem eine Art der Optimierung ist das Plugin tut, um einige unnötige Einsätze/entfernt von Fehler Etiketten zu speichern readding. Was auch Sinn macht.

können Sie überprüfen, was ich sagte von

jquery.validate.js v1.6 Check-in-Funktion bei der Validierung-Plugin-Quellcode suchen showLabel Linien 617-625 für die jeweiligen Stücke.

---

Eine mögliche Lösung könnte sein, zusätzlichen einen benutzerdefinierten showErrors Rückruf schaffen, das das Problem mit brutalen Gewalt löst.

Etwas nach dem Vorbild von

$("#send-mail").validate({ 
... 
    showErrors: function(errorMap, errorList) { 
     for (var i = 0; errorList[i]; i++) { 
      var element = this.errorList[i].element; 
      //solves the problem with brute force 
      //remove existing error label and thus force plugin to recreate it 
      //recreation == call to errorplacement function 
      this.errorsFor(element).remove(); 
     } 
     this.defaultShowErrors(); 
    } 
... 
}); 

Vielleicht gibt es eine sauberere Lösung für dieses Problem, aber dies sollte es tun, und gibt Ihnen Zeit, um eine bessere Lösung zu untersuchen.

Answer 2

Dank Jitter,

ich einige Graben um und fand das gleiche Problem erledigt.

Ich schaffte es, es durch "hacken" der ShowLabel-Funktion in der jquery.validation.js zu bekommen. Es ist nicht schön, aber funktioniert.

Das Überschreiben der Funktionsoption showErrors würde verhindern, dass ich den Plugin-Code ändern müsste, damit ich einen Blick darauf werfen kann.

Hier ist der Code, den ich für die showlabel Methode verwendet:

 showLabel: function(element, message) { 

      // look for existing error message 
      var label = this.errorsFor(element); 
      // existing error exist? 
      if (label.length) { 
       // refresh error/success class 
       label.removeClass().addClass(this.settings.errorClass); 

       // check if we have a generated label, replace the message then 
       label.attr("generated"); 

       // is message empty? 
       if(!message) 
       { 
        // add tick glyph 
        label.html("✔"); 

        // wipe element title 
        $(element).attr('title', message) 
       } 
       else 
       { 
        // clear error html and add cross glyph 
        label.html("✘"); 

        // update element title 
        $(element).attr('title', message) 
       } 

       // && label.html(message); 
      } 
      else { 
       // create label 
       label = $("<" + this.settings.errorElement + "/>") 
        .attr({"for": this.idOrName(element), generated: true}) 
        .addClass(this.settings.errorClass) 
        .html(message || ""); 
       if (this.settings.wrapper) { 
        // make sure the element is visible, even in IE 
        // actually showing the wrapped element is handled elsewhere 
        label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent(); 
       } 
       if (!this.labelContainer.append(label).length) 
        this.settings.errorPlacement 
         ? this.settings.errorPlacement(label, $(element)) 
         : label.insertAfter(element); 
      } 
      if (!message && this.settings.success) { 
       label.text(""); 
       typeof this.settings.success == "string" 
        ? label.addClass(this.settings.success) 
        : this.settings.success(label); 
      } 
      this.toShow = this.toShow.add(label); 
     }