Browser verfügen über integrierte Validierungsfunktionen, mit denen überprüft werden kann, ob die Nutzer die Daten im richtigen Format eingegeben haben. Sie können diese Elemente aktivieren, indem Sie die richtigen Elemente und Attribute verwenden. Darüber hinaus können Sie die Formularvalidierung mit CSS und JavaScript verbessern.
Warum sollten Sie Ihre Formulare validieren?
Im vorherigen Modul haben Sie erfahren, wie Sie Nutzern helfen können, das wiederholte Eingeben von Informationen in Formulare zu vermeiden. Wie können Sie Nutzern dabei helfen, gültige Daten einzugeben?
Es ist frustrierend, ein Formular auszufüllen, ohne zu wissen, welche Felder erforderlich sind oder welche Einschränkungen für diese Felder gelten. Sie geben beispielsweise einen Nutzernamen ein und senden ein Formular, um herauszufinden, dass Nutzernamen mindestens acht Zeichen haben müssen.
Sie können Ihre Nutzer dabei unterstützen, indem Sie Validierungsregeln definieren und kommunizieren.
Versehentlich fehlende Pflichtfelder für Nutzer vermeiden
Sie können HTML verwenden, um das richtige Format und die Beschränkungen für in Ihre Formulare eingegebene Daten anzugeben. Außerdem müssen Sie angeben, welche Felder Pflichtfelder sind.
Versuchen Sie, dieses Formular zu senden, ohne Daten einzugeben.
Wird eine Fehlermeldung im Anhang von <input> angezeigt, die Sie darüber informiert, dass das Feld erforderlich ist?
Grund dafür ist das Attribut required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Sie haben bereits gelernt, dass Sie viele weitere Typen verwenden können, z. B. type="email".
Sehen wir uns die erforderliche E-Mail-Adresse <input> an.
Versuchen Sie, dieses Formular zu senden, ohne Daten einzugeben. Gibt es Unterschiede zur Demo, die ich bereits gesehen habe? Gib nun deinen Namen in das Feld für die E-Mail-Adresse ein und versuche die Einreichung. Es wird eine andere Fehlermeldung angezeigt. Wie ist das möglich? Sie erhalten eine andere Meldung, da der eingegebene Wert keine gültige E-Mail-Adresse ist.
Das Attribut required teilt dem Browser mit, dass das Feld obligatorisch ist.
Der Browser prüft außerdem, ob die eingegebenen Daten dem Format von type entsprechen.
Das im Beispiel angezeigte E-Mail-Feld ist nur gültig, wenn es nicht leer ist und die eingegebenen Daten eine gültige E-Mail-Adresse sind.
Nutzern bei der Eingabe des richtigen Formats helfen
Sie haben gelernt, wie Sie ein Feld obligatorisch machen. Wie weisen Sie den Browser an, dass ein Nutzer mindestens acht Zeichen in ein Formularfeld eingeben muss?
Probiere die Demo aus. Nach der Änderung sollten Sie das Formular nicht mehr senden können, wenn Sie weniger als acht Zeichen eingeben.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
Der Name des Attributs lautet minlength.
Legen Sie den Wert auf 8 fest und Sie haben die gewünschte Validierungsregel.
Wenn Sie das Gegenteil tun möchten, verwenden Sie maxlength.
Validierungsregeln mitteilen
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Sorgen Sie dafür, dass alle Nutzer die Validierungsregeln verstehen.
Verbinden Sie dazu das Formularsteuerelement mit einem Element, das die Regeln erläutert.
Fügen Sie dazu dem Element mit dem id des Formulars ein aria-describedby-Attribut hinzu.
Musterattribut
Manchmal möchten Sie erweiterte Validierungsregeln definieren.
Auch hier können Sie ein HTML-Attribut verwenden.
Er heißt pattern. Sie können einen regulären Ausdruck als Wert definieren.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Hier sind nur Kleinbuchstaben zulässig. Der Nutzer muss mindestens 2 und nicht mehr als 20 Zeichen eingeben.
Wie würdest du pattern ändern, damit auch Großbuchstaben zulässig sind?
Jetzt ausprobieren
Die richtige Antwort lautet pattern="[a-zA-Z]{2,20}".
Stile hinzufügen
Jetzt wissen Sie, wie Sie eine Validierung in HTML hinzufügen. Wäre es nicht toll, wenn Sie Formularsteuerelemente auch auf Grundlage des Validierungsstatus gestalten könnten? Dies ist mit CSS möglich.
Stil eines erforderlichen Formularfelds anpassen
Zeigen Sie den Nutzern, dass ein Feld obligatorisch ist, bevor sie mit Ihrem Formular interagieren.
Sie können required-Felder mit der CSS-Pseudoklasse :required gestalten.
input:required {
border: 2px solid;
}
Ungültiger Stil für Formularsteuerelemente
Wissen Sie noch, was passiert, wenn die vom Nutzer eingegebenen Daten ungültig sind? Die Fehlermeldung, die an die Formularsteuerung angehängt ist, wird angezeigt. Wäre es nicht großartig, das Erscheinungsbild des Elements anzupassen, wenn dies passiert?
Mit der Pseudoklasse :invalid können Sie ungültigen Formularsteuerelementen Stile hinzufügen.
Darüber hinaus gibt es auch die Pseudoklasse :valid für die Gestaltung gültiger Formularelemente.
Es gibt weitere Möglichkeiten, Ihre Stile basierend auf der Validierung anzupassen. Im Modul zu CSS erfahren Sie mehr über das Gestalten von Formularen.
Validierung mit JavaScript
Um die Validierung Ihrer Formulare weiter zu verbessern, können Sie die JavaScript Constraint Validation API verwenden.
Aussagekräftige Fehlermeldungen
Sie haben bereits gelernt, dass Fehlermeldungen nicht in jedem Browser identisch sind. Wie können Sie allen Nutzern dieselbe Botschaft präsentieren?
Dazu verwenden Sie die Methode setCustomValidity() der Constraint Validation API.
Und so funktioniert es:
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Fragen Sie das Element ab, für das Sie die benutzerdefinierte Fehlermeldung festlegen möchten.
Prüfen Sie das invalid-Ereignis des von Ihnen definierten Elements.
Dort haben Sie die Nachricht mit setCustomValidity() festgelegt.
Dieses Beispiel zeigt die Meldung Please enter your name., wenn die Eingabe ungültig ist.
Öffnen Sie die Demo in verschiedenen Browsern. Sie sollten überall dieselbe Meldung sehen. Versuchen Sie nun, den JavaScript-Code zu entfernen, und versuchen Sie es noch einmal. Sie sehen wieder die Standardfehlermeldungen.
Die Constraint Validation API bietet noch viel mehr. Weitere Informationen zur Validierung mit JavaScript erhalten Sie in einem späteren Modul.
Validierung in Echtzeit
Sie können eine Echtzeitvalidierung in JavaScript hinzufügen, indem Sie das onblur-Ereignis eines Formularsteuerelements überwachen und die Eingabe sofort validieren, wenn ein Nutzer ein Formularfeld verlässt.
Klicken Sie in der Demo auf das Formularfeld, geben Sie „web“ ein und klicken Sie auf eine andere Stelle der Seite.
Unter dem Formularfeld wird die native Fehlermeldung für minlength angezeigt.
Weitere Informationen zum Implementieren der Echtzeitvalidierung mit JavaScript finden Sie in einem der nächsten Module.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über das Validieren von Formularen
Welches Attribut verwenden Sie, damit Formularsteuerelemente obligatorisch sind?
requiredneededessentialobligatoryIst es möglich, eigene Fehlermeldungen zu definieren?
message.:invalid.Ein <input> mit type="email" und dem Attribut required kann eingereicht werden: