In unserem vorherigen Tutorial haben wir besprochen, wie man eine einfache Formularvalidierung mit einigen Eingabeattributen in HTML5 und ein wenig Regex implementiert.
-
HTML5Formular-Eingangsvalidierung nur mit HTML5 und RegexMonty Shokeen
In diesem Tutorial lernen Sie, wie Sie ein jQuery-Plugin verwenden, um Ihrer Website eine Formularvalidierung hinzuzufügen.
Die Verwendung eines jQuery-Plugins zur Validierung von Formularen dient vielen Zwecken. Es gibt Ihnen zusätzliche Fähigkeiten wie die einfache Anzeige von benutzerdefinierten Fehlermeldungen und das Hinzufügen von bedingter Logik zur Formularvalidierung. Eine Validierungsbibliothek kann Ihnen auch helfen, die Validierung zu Ihren HTML-Formularen mit minimalen oder gar keinen Änderungen am Markup hinzuzufügen. Die Bedingungen für die Gültigkeit können auch jederzeit einfach hinzugefügt, entfernt oder geändert werden.
Getting Started
In diesem Tutorial werden wir das jQuery Validation Plugin verwenden. Das Plugin bietet viele Funktionen und hilft Ihnen auch, Ihre eigene Validierungslogik zu definieren.
Bevor wir das Plugin in unseren Feldern verwenden können, müssen wir die notwendigen Dateien in unser Projekt einbinden. Es gibt zwei verschiedene Dateien, die einzubinden sind. Die erste ist die Core-Datei, die die Kernfunktionen des Plugins enthält, darunter alles von verschiedenen Validierungsmethoden bis hin zu einigen benutzerdefinierten Selektoren. Die zweite Datei enthält zusätzliche Methoden zur Validierung von Eingaben wie Kreditkartennummern und US-Telefonnummern.
Sie können diese Dateien über Paketmanager wie Bower oder NPM zu Ihren Projekten hinzufügen. Sie können auch einfach direkt einen CDN-Link zu den Dateien erhalten und sie in ein script-Tag auf Ihrer Webseite einfügen. Da es sich um ein jQuery-basiertes Plugin handelt, müssen Sie auch einen Link zur jQuery-Bibliothek hinzufügen.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
Nachdem Sie diese Dateien hinzugefügt haben, können Sie mit der validate-Methode jedes Formular validieren.
Validieren Sie Ihr erstes Formular
Sie können mit diesem Plugin beginnen, ohne wesentliche Änderungen an Ihrem Markup vorzunehmen. Das Einzige, was Sie eventuell ändern müssen, ist das Hinzufügen eines id oder class zu dem Formular, das Sie validieren möchten, wenn es nicht bereits eines hat.
Hier ist das Markup eines einfachen Formulars, das wir mit dem jQuery-Plugin validieren werden.
<form action="" method="post"><p><label for="name">Name <span>(required, at least 3 characters)</span></label><input name="name" minlength="3" type="text" required></p><p><label for="email">E-Mail <span>(required)</span></label><input type="email" name="email" required></p><p><input class="submit" type="submit" value="SUBMIT"></p></form>
Wir verwenden die gleichen Attribute, die wir in unserem vorherigen HTML5-basierten Formular-Validierungs-Tutorial verwendet haben. Das Formular wird immer noch die Validierung durchführen, ohne dass wir irgendein JavaScript hinzufügen müssen. Durch die Verwendung des Plugins für die Validierung können wir jedoch die Fehlermeldungen direkt unter dem ungültigen Eingabefeld anzeigen. Außerdem können wir die Fehlermeldungen nach Belieben gestalten.
Um die Validierung des Formulars mit diesem Plugin zu starten, fügen Sie einfach den folgenden JavaScript-Code auf der Webseite hinzu:
$(document).ready(function() {$("#basic-form").validate();});
Dies basiert auf der Annahme, dass Sie die erforderlichen JavaScript-Dateien bereits hinzugefügt haben. Durch das Hinzufügen dieser JavaScript-Zeilen wird sichergestellt, dass Ihr Formular korrekt validiert wird und alle Fehlermeldungen anzeigt. Hier ist eine funktionierende Demo.
Die Bibliothek versucht, so benutzerfreundlich wie möglich zu sein, indem sie Fehlermeldungen nur dann anzeigt, wenn sie notwendig sind. Wenn Sie z. B. mit der Tabulatortaste durch die Felder Name und E-Mail gehen, ohne tatsächlich Informationen einzugeben, erhalten Sie keine Fehlermeldungen. Wenn Sie jedoch versuchen, zum E-Mail-Feld zu wechseln, nachdem Sie nur ein Zeichen in das Namensfeld eingegeben haben, erhalten Sie eine Fehlermeldung über die Eingabe von mindestens drei Zeichen.
Die Fehlermeldungen werden mithilfe des label-Elements in das DOM injiziert. Sie haben alle eine error-Klasse, so dass es einfach ist, ein eigenes Styling anzuwenden, wie wir es in unserem Beispiel getan haben. Dasselbe gilt für ungültige Eingaben, die ebenfalls eine error-Klasse erhalten.
Optionen für die validate()-Methode
In unserem vorherigen Beispiel haben wir einfach die validate()-Methode aufgerufen, ohne ihr irgendwelche Optionen zu übergeben. Wir können jedoch auch ein Objekt an diese Methode übergeben, zusammen mit vielen Optionen innerhalb dieses Objekts. Der Wert dieser Optionen bestimmt, wie das Formular-Plugin mit der Validierung, Fehlern usw. umgeht.
Wenn Sie möchten, dass dieses Plugin einige Elemente während des Validierungsprozesses ignoriert, können Sie dies einfach tun, indem Sie eine Klasse oder einen Selektor an ignore() übergeben. Das Plugin wird alle Formularelemente mit diesem bestimmten Selektor ignorieren, wenn es die Eingabe validiert.
Validierungsregeln für Eingabefelder hinzufügen
Sie können auch einige Regeln an die Methode validate() übergeben, um zu bestimmen, wie die Eingabewerte validiert werden. Der Wert des Parameters rules sollte ein Objekt mit Schlüssel-Werte-Paaren sein. Der Schlüssel ist jeweils der Name des Elements, das wir validieren wollen. Der Wert dieses Schlüssels ist ein Objekt, das einen Satz von Regeln enthält, die für die Validierung verwendet werden.
Sie können auch eine bedingte Logik zu den verschiedenen Feldern hinzufügen, die Sie validieren, indem Sie das Schlüsselwort depends verwenden und ihm eine Callback-Funktion übergeben, die entweder true oder false zurückgibt. Hier ist ein Beispiel, das einfache Regeln verwendet, um zu definieren, wie die Eingabe validiert wird.
$(document).ready(function() {$("#basic-form").validate({rules: {name : {required: true,minlength: 3},age: {required: true,number: true,min: 18},email: {required: true,email: true},weight: {required: {depends: function(elem) {return $("#age").val() > 50}},number: true,min: 0}}});});
Im obigen Codeschnipsel sind die Schlüssel nameageemail und weight einfach die Namen der Eingabeelemente. Jeder Schlüssel hat ein Objekt als Wert, und die Schlüssel-Wert-Paare im Objekt bestimmen, wie ein Eingabefeld validiert wird.
Diese Validierungsoptionen sind ähnlich wie die Attribute, die Sie im Markup eines Formulars hinzufügen können. Wenn Sie zum Beispiel required auf true setzen, wird das Element für das Absenden des Formulars erforderlich. Das Setzen von minlength auf einen Wert wie 3 zwingt den Benutzer, mindestens 3 Zeichen in die Texteingabe einzugeben. Es gibt noch ein paar andere eingebaute Validierungsmethoden, die auf der Dokumentationsseite kurz beschrieben werden.
Eine Sache, die Sie im obigen Code beachten sollten, ist die Verwendung von depends, um das Gewicht bedingt zu einem Pflichtfeld zu machen, wenn das Alter über 50 ist. Dies geschieht durch die Rückgabe von true in der Callback-Funktion, wenn der im Eingabefeld age eingegebene Wert über 50 liegt.
Erstellen Sie Ihre eigenen Fehlermeldungen
Mit diesem Plugin können Sie auch Fehlermeldungen für verschiedene Validierungsregeln in einem Formular festlegen. Sie beginnen, indem Sie den Wert des Schlüssels messages auf ein Objekt mit Schlüssel-Wert-Paaren für die Eingabefelder und die entsprechenden Fehlermeldungen setzen.
Hier ist ein Beispiel, das benutzerdefinierte Fehlermeldungen für jedes Eingabefeld anzeigt.
messages : {name: {minlength: "Name should be at least 3 characters"},age: {required: "Please enter your age",number: "Please enter your age as a numerical value",min: "You must be at least 18 years old"},email: {email: "The email should be in the format: [email protected]"},weight: {required: "People with age over 50 have to enter their weight",number: "Please enter your weight as a numerical value"}}
Genauso wie Regeln, messages verlassen sich auf den Namen der Eingabefelder. Jedes dieser Eingabefelder akzeptiert als Wert ein Objekt mit Schlüssel-Wert-Paaren. Der Schlüssel ist jeweils die Validierungsregel, die befolgt werden muss. Der Wert ist einfach die Fehlermeldung, die angezeigt werden soll, wenn eine bestimmte Regel verletzt wird.
Zum Beispiel wird das Eingabefeld age die Fehlermeldung required auslösen, wenn es leer gelassen wird. Es wird jedoch die number Fehlermeldung auslösen, wenn Sie etwas anderes als eine Zahl in das Eingabefeld eingeben.
Eine Sache, die Sie bemerken werden, ist, dass das Plugin eine generische Fehlermeldung für Validierungsregeln anzeigt, wenn Sie keine benutzerdefinierte Fehlermeldung angegeben haben. Versuchen Sie, in der folgenden Demo verschiedene Werte einzugeben, und Sie werden sehen, dass die benutzerdefinierten und generischen Fehlermeldungen wie erwartet angezeigt werden.
Anpassen des Aussehens von Fehlermeldungen
Es kann vorkommen, dass Sie Ihre eigenen Klassen für gültige und ungültige Eingaben hinzufügen möchten, um sie spezifischer anzusprechen oder für eine bessere Integration in ein bestehendes Theme.
Sie können die Klassen, die zu gültigen oder ungültigen Eingabeelementen hinzugefügt werden, mit den Schlüsseln errorClass und validClass ändern. Dies kann helfen, einige unerwünschte Zusammenstöße aufgrund der Wiederverwendung desselben Klassennamens zu vermeiden. Standardmäßig wird die Klasse error jedem ungültigen Eingabeelement und Label zugewiesen. Die Klasse valid wird jedem gültigen Eingabeelement zugewiesen.
Es ist wichtig zu wissen, dass das Setzen von errorClass auf etwas wie fail-alert die Klasse error aus den ungültigen Elementen entfernt. Sie müssen errorClass: "error fail-alert" verwenden, um demselben Element mehrere Klassen zuzuweisen. Dasselbe gilt für validClass.
Es werden keine zusätzlichen Beschriftungen zum Formular hinzugefügt, wenn der Benutzer eine gültige Eingabe macht. Also werden die Klassen von validClass dem gültigen Eingabeelement zugewiesen.
Der folgende Codeausschnitt baut auf dem vorherigen Beispiel auf, um benutzerdefinierte CSS-Klassen und Styling zu ungültigen und gültigen Elementen hinzuzufügen.
Der einzige zusätzliche JavaScript-Code wird verwendet, um die Klassen zuzuweisen.
$(document).ready(function() {$("#basic-form").validate({errorClass: "error fail-alert",validClass: "valid success-alert",// ... More validation code from previous example
Hier ist das CSS, das wir verwenden werden, um das Aussehen der Fehlermeldungen zu ändern:
label.error.fail-alert {border: 2px solid red;border-radius: 4px;line-height: 1;padding: 2px 0 6px 6px;background: #ffe6eb;}input.valid.success-alert {border: 2px solid #4CAF50;color: green;}
Zusätzlich zur Anpassung der Fehlermeldungen fügen wir auch unser eigenes Styling zu gültigen Eingabeelementen hinzu. Hier ist eine CodePen-Demo, die uns das Endergebnis zeigt.
Weitere Optionen zum Ändern des Plugin-Verhaltens
Sie können das Plugin daran hindern, Eingabefelder bei Tastenbetätigung, Klick, und anderen derartigen Ereignissen, indem Sie den Wert von onfocusoutonkeyup oder onclick auf false setzen. Beachten Sie, dass boolean true kein gültiger Wert für diese Schlüssel ist. Das bedeutet im Grunde, wenn Sie möchten, dass das Plugin bei einem Key-Up-Ereignis validiert oder den Fokus verliert, lassen Sie diese Optionen einfach unangetastet.
Sie haben auch die Möglichkeit, das Element zu ändern, in dem der Fehler erscheint. Standardmäßig verwendet das Plugin das label-Element, um alle Fehlermeldungen anzuzeigen, aber Sie können es auf em oder ein beliebiges anderes Element mit dem errorElement-Schlüssel ändern. Das Fehlerelement selbst kann dann mit dem Schlüssel wrapper in ein anderes HTML-Element eingeschlossen werden.
Dies sind einige der häufigsten Optionen, die Sie wahrscheinlich bei der Validierung von Formularen verwenden werden. Es gibt jedoch noch einige andere Validierungsoptionen, die nützlich sein können, wenn Sie z.B. die Platzierung von Fehlermeldungen ändern oder sie gruppieren möchten.
Abschließende Gedanken
In diesem Tutorial haben wir gelernt, wie wir unsere Formularvalidierung mit Hilfe eines jQuery-Plugins auf die nächste Stufe bringen können. Die Verwendung von JavaScript-Formularvalidierung gibt uns eine Menge zusätzlicher Kontrolle über die grundlegende HTML-Validierung. Zum Beispiel können Sie einfach steuern, wie und wann verschiedene Fehlermeldungen erscheinen, wenn eine Eingabe mit ungültigen Werten gefüllt ist. Ebenso können Sie festlegen, ob das Plugin die Validierung für einige bestimmte Elemente überspringen soll. Ich empfehle Ihnen dringend, die Dokumentation dieses Plugins zu lesen und einige Best Practices zur richtigen Verwendung zu beachten.
In unserem nächsten Tutorial lernen Sie einige weitere JavaScript-basierte Tools und Plugins kennen, mit denen Sie Formulare einfach erstellen und validieren können.
Und wenn Sie schon einmal hier sind, schauen Sie sich auch einige unserer anderen Beiträge zu JavaScript-Formularen und Formularvalidierung an!
-
HTML5Formeingabevalidierung nur mit HTML5 und RegexMonty Shokeen
-
WebentwicklungEric -
PHPErstellen eines ein Kontaktformular in PHPMonty Shokeen -
PHPVergleich der 5 besten PHP-Formularersteller (und 4 kostenlosen Skripte)Monty Shokeen -
JavaScriptBeste JavaScript-Formulare des Jahres 2019Monty Shokeen