Formularvalidierung

Manchmal haben wir in unseren <form>´s Felder, die nicht optional sind, d.h. es müssen Informationen angegeben werden, bevor wir sie übermitteln können. Um diese Regel durchzusetzen, können wir das required Attribut einem <input> Element hinzufügen.

Nehmen wir zum Beispiel:

Dies rendert ein Textfeld, und wenn wir versuchen, das Formular abzuschicken, ohne es auszufüllen, erhalten wir diese Meldung:

Eine weitere integrierte Validierung, die wir verwenden können, besteht darin, einem Zahlenfeld einen Mindest- oder Höchstwert zuzuweisen, z. B. <input type="number"> und <input type="range">. Um einen minimal akzeptablen Wert festzulegen, verwenden wir das Attribut min und weisen einen Wert zu. Umgekehrt weisen wir dem Attribut max einen Wert zu, um einen maximal akzeptablen Wert festzulegen. Sehen wir uns das im Code an:

Wenn ein Benutzer versucht, eine Eingabe zu übermitteln die kleiner als 1 ist, wird eine Warnung angezeigt:

Eine ähnliche Meldung wird angezeigt, wenn ein Benutzer versucht, eine Zahl größer 4 einzugeben.

In der vorherigen Übung konnten wir mit min und max akzeptable Mindest- und Höchstwerte in einem Zahlenfeld festlegen. Aber was ist mit Textfeldern? Es gibt sicherlich Fälle, in denen wir nicht möchten, dass unsere Benutzer mehr als eine bestimmte Anzahl von Zeichen eingeben (denken Sie an die Zeichenbegrenzung für Nachrichten auf Twitter). Vielleicht möchten wir sogar eine Mindestanzahl von Zeichen festlegen. Praktischerweise gibt es für diese Situationen integrierte HTML5-Validierungen.

Um eine Mindestanzahl von Zeichen für ein Textfeld festzulegen, fügen wir das Attribut minlength und einen Wert hinzu, um einen Mindestwert festzulegen. Um die Höchstanzahl von Zeichen für ein Textfeld festzulegen, verwenden wir das Attribut maxlength und legen einen Höchstwert fest. Sehen wir uns diese Attribute im Code an:

Wenn ein Benutzer versucht, die Nachricht <form> mit weniger als dem festgelegeten Minimum abzusenden, wird diese Meldung angezeigt:

Zusätzlich zur Überprüfung der Textlänge könnten wir auch eine Validierung hinzufügen, um zu prüfen, wie der Text eingegeben wurde. In Fällen, in denen die Benutzereingabe bestimmten Richtlinien folgen soll, verwenden wir das Musterattribut pattern und weisen ihm einen regulären Ausdruck oder Regex zu. Reguläre Ausdrücke sind eine Zeichenfolge, die ein Suchmuster bilden. Wenn die Eingabe dem Regex entspricht, kann das Formular übermittelt werden.

Nehmen wir an, wir möchten nach einer gültigen Kreditkartennummer (einer 14- bis 16-stelligen Nummer) suchen. Wir könnten den Regex verwenden: [0-9]{14,16}, der prüft, ob der Benutzer nur Zahlen eingegeben hat und ob er mindestens 14 und höchstens 16 Ziffern eingegeben hat.

So fügen Sie dies einem Formular hinzu:

Mit diesem Muster können Benutzer das <form> nicht mit einer Nummer abschicken, die nicht dem regulären Ausdruck entspricht. Wenn sie es versuchen, wird ihnen eine Validierungsmeldung wie diese angezeigt: