jQuery Validate benutzerdefinierte Erfolgsmeldung wird bei erneuter Prüfung wiederholt

Question

Also ich habe diese jQuery Validation Plugin, und es hat eine benutzerdefinierte Erfolgsmeldung. Das Formular validiert automatisch, weil es an den Körper angehängt ist. Das Problem kommt, wenn ich die Variable, um zu sehen, wenn das Formular gültig ist überprüfen möchten. Das revalidates es, die am Ende das Hinzufügen einer zusätzlichen Erfolgsmeldung (Bild in meinem Fall), die unerwünscht ist. Ich möchte, dass die Erfolgsmeldung nur einmal erscheint, unabhängig von der Tatsache, dass sie mehrfach validiert wird. Hier ist mein Code:

  $("#makeaComment").validate({
   errorContainer: ".error",
   errorPlacement: function(error, element) {
    error.appendTo( element.next() );
   },
   success: function(label) {
    label.removeClass("error").addClass("check");
   }
  });

  $("#loginAction").click(function() {
   if ($("#makeaComment").valid()) {
    commentLogin();
   }
   else {
    $('#loginAction').attr('value','Fix Errors and Continue');
   }
  });

Gracias.

Answer 1

Achten Sie bei der Erfolgsfunktion darauf, dass Sie entweder prüfen, ob das Bild bereits vorhanden ist, oder alles löschen und Ihr Bild hinzufügen. Ich würde mich für Ersteres entscheiden.

Wenn man sich das Skript ansieht, scheint es, dass es viele Elemente für den Fehler macht. Anstatt also die Klasse error zu entfernen und checked hinzuzufügen, versuchen Sie einfach, checked als neues Element einmal hinzuzufügen. Achten Sie aber darauf, die Klasse zu entfernen, wenn ein Fehler angezeigt wird.

Answer 2

Ich habe endlich herausgefunden, wie ich dieses Problem lösen kann! Wenn man die Klasse "error" aus dem gültigen Element entfernt, überspringt der Jquery-Plugin-Code den Codeblock, in dem das Element wiederverwendet wird, und fügt stattdessen ein anderes hinzu. Der einfachste Weg, dies zu überwinden, ist, die Fehlerklasse nicht zu entfernen, sondern das CSS in der gültigen Klasse zu überschreiben.

z. B:

label.removeClass("error").addClass("check"); wird label.addClass("check");

und Ihr CSS könnte wie folgt geändert werden:

label.error {
    color: red; 
}
label.valid {
    color: green !important; // !important added 
}