„Aber macht jQuery es nicht einfach, ein eigenes Validierungs-Plugin zu schreiben?“
Sicher, aber es gibt noch viele Feinheiten zu beachten: Sie benötigen eine Standardbibliothek mit Validierungsmethoden (z. B. E-Mails, URLs, Kreditkartennummern). Sie müssen Fehlermeldungen im DOM platzieren und sie gegebenenfalls ein- und ausblenden. Sie möchten auf mehr als nur ein Submit-Ereignis wie Keyup und blur reagieren.
Möglicherweise benötigen Sie verschiedene Möglichkeiten, um Validierungsregeln entsprechend der serverseitigen Umgebung anzugeben, die Sie für verschiedene Projekte verwenden. Und schließlich wollen Sie das Rad nicht neu erfinden, oder?

„Aber gibt es nicht schon eine Menge Validierungs-Plugins?“
Richtig, es gibt viele nicht-jQuery-basierte Lösungen (die Sie vermeiden würden, seit Sie jQuery gefunden haben) und einige jQuery-basierte Lösungen. Dieses spezielle ist eines der ältesten jQuery-Plugins (gestartet im Juli 2006) und hat sich in Projekten auf der ganzen Welt bewährt. Es gibt auch einen Artikel, in dem diskutiert wird, wie dieses Plugin zur Rechnung der Validierungslösung passt.

Nicht überzeugt? Schauen Sie sich dieses Beispiel an:

<form class="cmxform" method="get" action="">
 <fieldset>
 <legend>Please provide your name, email address (won't be published) and a comment</legend>
 <p>
 <label for="cname">Name (required, at least 2 characters)</label>
 <input name="name" minlength="2" type="text" required>
 </p>
 <p>
 <label for="cemail">E-Mail (required)</label>
 <input type="email" name="email" required>
 </p>
 <p>
 <label for="curl">URL (optional)</label>
 <input type="url" name="url">
 </p>
 <p>
 <label for="ccomment">Your comment (required)</label>
 <textarea name="comment" required></textarea>
 </p>
 <p>
 <input class="submit" type="submit" value="Submit">
 </p>
 </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

Link Ist nicht so nett und einfach?

Eine einzige Zeile jQuery, um das Formular auszuwählen und das Validierungs-Plugin anzuwenden, sowie einige Anmerkungen zu jedem Element, um die Validierungsregeln anzugeben.

Natürlich ist das nicht die einzige Möglichkeit, Regeln festzulegen. Sie müssen sich auch nicht auf diese Standardnachrichten verlassen, aber sie sind praktisch, wenn Sie mit dem Einrichten der Validierung für ein Formular beginnen.

link Ein paar Dinge, auf die Sie achten sollten, wenn Sie mit der Demo herumspielen

• Nachdem Sie versucht haben, ein ungültiges Formular einzureichen, wird das erste ungültige Element fokussiert, sodass der Benutzer das Feld korrigieren kann. Wenn ein anderes ungültiges Feld – das war nicht das erste – vor dem Senden fokussiert wurde, wird dieses Feld stattdessen fokussiert, sodass der Benutzer unten beginnen kann, wenn er oder sie dies vorzieht.
• Bevor ein Feld als ungültig markiert wird, ist die Validierung faul: Bevor das Formular zum ersten Mal gesendet wird, kann der Benutzer durch Felder blättern, ohne lästige Nachrichten zu erhalten – er wird nicht abgehört, bevor er die Chance hat, tatsächlich einen korrekten Wert einzugeben
• Sobald ein Feld als ungültig markiert ist, wird es eifrig: Sobald der Benutzer den erforderlichen Wert eingegeben hat, wird die Fehlermeldung entfernt
• Wenn der Benutzer etwas in ein nicht markiertes Feld eingibt und Tabs / Klicks davon entfernt (das Feld verwischen), wird es validiert – offensichtlich hatte der Benutzer die Absicht, etwas einzugeben, konnte aber den richtigen Wert nicht eingeben

Dieses Verhalten kann beim Durchklicken von Demos des Validierungs–Plugins irritierend sein – es ist für eine unauffällige Benutzererfahrung konzipiert und nervt den Benutzer so wenig wie möglich mit unnötigen Fehlermeldungen. Wenn Sie also andere Demos ausprobieren, versuchen Sie, wie einer Ihrer Benutzer zu reagieren, und prüfen Sie, ob das Verhalten dann besser ist. Wenn nicht, lassen Sie mich bitte wissen, welche Ideen Sie für Verbesserungen haben!

Link-API-Dokumentation

Sie suchen wahrscheinlich nach

Linkoptionen für die validate() -Methode

Wenn nicht, lesen Sie weiter.

In der gesamten Dokumentation werden sehr oft zwei Begriffe verwendet, daher ist es wichtig, dass Sie ihre Bedeutung im Kontext des Validierungs-Plugins kennen:

• Methode: Eine Validierungsmethode implementiert die Logik zum Validieren eines Elements, wie eine E-Mail-Methode, die nach dem richtigen Format des Werts einer Texteingabe sucht. Eine Reihe von Standardmethoden ist verfügbar, und es ist einfach, eigene zu schreiben.
• Regel: Eine Validierungsregel verknüpft ein Element mit einer Validierungsmethode wie „validate input with name „primary-mail“ mit den Methoden „required“ und „email“.

Plugin-Methoden verknüpfen

Diese Bibliothek fügt drei jQuery-Plugin-Methoden hinzu, wobei der Haupteinstiegspunkt die validate -Methode ist:

• validate() – Validiert das ausgewählte Formular.
• valid() – Prüft, ob das ausgewählte Formular oder ausgewählte Elemente gültig sind.
• rules() – Lesen, Hinzufügen und Entfernen von Regeln für ein Element.

Benutzerdefinierte Selektoren verknüpfen

Diese Bibliothek erweitert jQuery auch um drei benutzerdefinierte Selektoren:

• :blank – Wählt alle Elemente mit einem leeren Wert aus.
• :filled – Wählt alle Elemente mit einem gefüllten Wert aus.
• :unchecked – Wählt alle Elemente aus, die nicht markiert sind.

link Validator

Die validate-Methode gibt ein Validator-Objekt zurück, das über einige öffentliche Methoden verfügt, mit denen Sie die Validierung programmgesteuert auslösen oder den Inhalt des Formulars ändern können. Das Validator-Objekt verfügt über mehr Methoden, aber nur die hier dokumentierten sind zur Verwendung vorgesehen.

• Validator.form() – Validiert das Formular.
• Validator.element() – Validiert ein einzelnes Element.
• Validator.resetForm() – Setzt das kontrollierte Formular zurück.
• Validator.showErrors() – Zeigt die angegebenen Nachrichten an.
• Validator.numberOfInvalids() – Gibt die Anzahl der ungültigen Felder zurück.
• Validator.destroy() – Zerstört diese Instanz von validator.

Es gibt einige statische Methoden für das Validator-Objekt:

• jQuery.validator.addMethod() – Fügen Sie eine benutzerdefinierte Validierungsmethode hinzu.
• jQuery.validator.format() – Ersetzt {n} Platzhalter durch Argumente.
• jQuery.validator.setDefaults() – Ändern Sie die Standardeinstellungen für die Validierung.
• jQuery.validator.addClassRules() – Fügen Sie eine zusammengesetzte Klassenmethode hinzu.

Linkliste der integrierten Validierungsmethoden

Eine Reihe von Standard–Validierungsmethoden wird bereitgestellt:

• required – Macht das Element erforderlich.
• remote – Fordert eine Ressource an, um das Element auf Gültigkeit zu überprüfen.
• minlength – Bewirkt, dass das Element eine bestimmte Mindestlänge benötigt.
• maxlength – Bewirkt, dass das Element eine bestimmte maximale Länge benötigt.
• rangelength – Bewirkt, dass das Element einen bestimmten Wertebereich benötigt.
• min – Bewirkt, dass das Element ein bestimmtes Minimum erfordert.
• max – Bewirkt, dass das Element ein bestimmtes Maximum benötigt.
• range – Bewirkt, dass das Element einen bestimmten Wertebereich benötigt.
• step – Macht das Element einen bestimmten Schritt erforderlich.
• email – Erfordert für das Element eine gültige E–Mail–Adresse
• url – Erfordert für das Element eine gültige URL
• date – Erfordert für das Element ein Datum.
• dateISO – Bewirkt, dass das Element ein ISO-Datum benötigt.
• number – Bewirkt, dass das Element eine Dezimalzahl benötigt.
• digits – Macht das Element nur Ziffern erforderlich.
• equalTo – Erfordert, dass das Element mit einem anderen identisch ist

Einige weitere Methoden werden als Add-Ons bereitgestellt und sind derzeit in additional-methods enthalten.js im Download-Paket. Nicht alle von ihnen sind hier dokumentiert:

• accept – Macht einen Datei-Upload nur bestimmte MIME-Typen akzeptieren.
• creditcard – Macht das Element eine Kreditkartennummer erforderlich.
• extension – Bewirkt, dass das Element eine bestimmte Dateierweiterung benötigt.
• phoneUS – Validieren Sie für eine gültige US-Telefonnummer.
• require_from_group – Stellt sicher, dass eine bestimmte Anzahl von Feldern in einer Gruppe vollständig ist.

Den Quellcode für alle zusätzlichen Methoden finden Sie im GitHub-Repository.

Es ist möglich, die Implementierung der integrierten Regeln mithilfe der $.validator.methods Eigenschaft

link Allgemeine Richtlinien

Im Abschnitt Allgemeine Richtlinien werden das Design und die Ideen hinter dem Plugin ausführlich erläutert und erläutert, warum bestimmte Dinge so sind, wie sie sind. Es behandelt die Funktionen detaillierter als die API-Dokumentation, in der die verschiedenen verfügbaren Methoden und Optionen nur kurz erläutert werden.

Wenn Sie sich entschieden haben, das Validierungs-Plugin in Ihrer Anwendung zu verwenden und es besser kennenlernen möchten, sollten Sie die Richtlinien lesen.

verknüpfen Sie Felder mit komplexen Namen (Klammern, Punkte)

Wenn Sie ein Namensattribut wie user haben, stellen Sie sicher, dass der Name in Anführungszeichen gesetzt wird. Weitere Details in den Allgemeinen Richtlinien.

link Zu viel Rekursion

Ein weiteres häufiges Problem tritt bei diesem Code auf:

 $("#myform").validate({
 submitHandler: function(form) {
 // some other code
 // maybe disabling submit button
 // then:
 $(form).submit();
 }
 });

Dies führt zu einem Fehler mit zu viel Rekursion: $(form).submit() löst eine weitere Validierungsrunde aus, die zu einem weiteren Aufruf von submitHandler voila, Rekursion. Ersetzen Sie dies durch Form.submit() , das stattdessen das native Submit-Ereignis und nicht die Validierung auslöst.

Der korrekte Code sieht also etwas anders aus:

 $("#myform").validate({
 submitHandler: function(form) {
 form.submit();
 }
 });

Verknüpfen Sie das Marketo-Anmeldeformular

Verknüpfen Sie das Marketo-Anmeldeformular, Schritt 2

Basierend auf einer alten Version des marketo.com anmeldeformular. Die benutzerdefinierte Validierung wurde einmal durch dieses Plugin ersetzt. Vielen Dank an Glen Lipka für seinen Beitrag!

Bemerkenswerte Funktionen der Demo:

• Angepasste Nachrichtenanzeige: Es werden keine Nachrichten für die gewünschte Methode angezeigt, nur für Tippfehler (z. B. falsches E-Mail-Format); Oben wird eine Zusammenfassung angezeigt („Sie haben 12 Felder verpasst. Sie wurden unten hervorgehoben.“)
• Remote-Validierung des E-Mail-Felds. Versuchen Sie, zB einzugeben.
• Integration mit Masked-Input-Plugin, siehe PLZ- und Telefonfelder und Kreditkartennummer in Schritt 2
• Eine benutzerdefinierte Methode, um die Rechnungsadresse in Schritt 2 optional zu machen, wenn „Same as Company Address“ aktiviert ist
• Eine benutzerdefinierte Methode zum Überprüfen des Passworts in Schritt: Überprüft, ob das Passwort mindestens eine Zahl und ein Zeichen enthält und mindestens 6 Zeichen lang ist. Wenn der Benutzer das Feld mit einem ungültigen Wert verwischt, wird die Eingabe geleert und erhält wieder den Fokus.

verknüpfen Sie das Anmeldeformular Remember The Milk

Das Anmeldeformular von rememberthemilk.com (basierend auf einer älteren Version). Die benutzerdefinierte Validierung wurde mit diesem Plugin ersetzt. Vielen Dank an RTM für Ihren Beitrag!

Bemerkenswerte Funktionen der Demo:

• Benutzerdefinierte Nachrichtenanzeige, basierend auf dem ursprünglichen Tabellenlayout, mit der success-Option, um ein Häkchen für gültige Felder anzuzeigen
• Remote-Validierung des Benutzernamens, um zu überprüfen, ob er bereits vergeben ist (versuchen Sie „Peter“, „asdf“ oder „George“)

Verknüpfen Sie ein mehrteiliges Formular „buy&sell a house“

Von Michael Evangelista mehrteiliges Formular für den Kauf und Verkauf von Häusern.

Bemerkenswerte Funktionen der Demo:

• Multipart, implementiert mit dem Akkordeon der jQuery-Benutzeroberfläche und einer benutzerdefinierten Methode, um zu überprüfen, ob sich ein Element bei der Validierung auf der aktuellen Seite befindet
• Integration mit Masked-Input-Plugin, siehe Felder für Telefon und Postleitzahl

Link Verwenden der Fernvalidierung, um bei s zu helfen

Funktionen Fernvalidierung, um dem Benutzer beim Ausfüllen von s zu helfen.

Bemerkenswerte Funktionen der Demo:

• Fernvalidierung, um zu überprüfen, ob der Benutzer das Richtige , ohne ihn zu zwingen, das Formular zuerst einzureichen