Browser verfügen über integrierte Funktionen zur Validierung, mit denen überprüft wird, ob Nutzer die Daten im richtigen Format eingegeben haben. Sie können diese Funktionen 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 gelernt, wie Sie Nutzenden helfen können, Informationen erneut in Formulare einzugeben. Wie können Sie Nutzern bei der Eingabe gültiger Daten helfen?
Es ist frustrierend, ein Formular auszufüllen, ohne zu wissen, welche Felder erforderlich sind. oder die Einschränkungen dieser Felder. Beispiel: Sie geben einen Nutzernamen ein und senden ein Formular, um festzustellen, dass ein Nutzername mindestens acht Zeichen lang sein muss.
Sie können Nutzern dabei helfen, indem Sie Validierungsregeln definieren und kommunizieren.
Nutzer vor versehentlichen fehlenden Pflichtfeldern schützen
Mithilfe von HTML können Sie das richtige Format und die Beschränkungen für die in Ihre Formulare eingegebenen Daten festlegen. Außerdem müssen Sie angeben, welche Felder erforderlich sind.
Versuchen Sie, dieses Formular ohne Eingabe von Daten zu senden.
Wird an <input> eine Fehlermeldung angehängt, die besagt, dass das Feld erforderlich ist?
Dies geschieht durch 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 ohne Eingabe von Daten zu senden. Gibt es einen Unterschied zur vorherigen Demo? Gib nun deinen Namen in das E-Mail-Feld ein und versuche, die Eingabe zu senden. Es wird eine andere Fehlermeldung angezeigt. Wie ist das möglich? Sie erhalten eine andere Meldung, weil 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 auch, ob die eingegebenen Daten mit dem Format von type übereinstimmen.
Das im Beispiel gezeigte 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 Felder als obligatorisch festlegen. Wie würden Sie den Browser anweisen, dass ein Nutzer mindestens acht Zeichen in ein Formularfeld eingeben muss?
Probieren Sie 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.
Wenn Sie den Wert auf 8 setzen, haben Sie die gewünschte Validierungsregel.
Wenn Sie das Gegenteil ausführen 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 Ihre Validierungsregeln verstehen.
Verbinden Sie dazu das Formularsteuerelement mit einem Element, das die Regeln erklärt.
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.
Es heißt pattern und Sie können ein
Regulärer Ausdruck als Wert festlegen.
<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. muss der Nutzer mindestens zwei, aber nicht mehr als zwanzig Zeichen eingeben.
Wie würden Sie die 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 basierend auf dem Validierungsstatus gestalten könnten? Dies ist mit CSS möglich.
So gestalten Sie ein Pflichtfeld in einem Formular
Zeigen Sie dem Nutzer, dass ein Feld obligatorisch ist, bevor er mit dem Formular interagiert.
Sie können required-Felder mit der CSS-Pseudoklasse :required gestalten.
input:required {
border: 2px solid;
}
Ungültiger Stil für Formularsteuerelemente
Erinnern Sie sich, was passiert, wenn vom Nutzer eingegebene Daten ungültig sind? Die an das Formularsteuerelement angehängte Fehlermeldung wird angezeigt. Wäre es nicht gut, das Erscheinungsbild des Elements anzupassen, wenn das passiert?
Sie können die Pseudoklasse :invalid verwenden.
um ungültigen Formularsteuerelementen Stile hinzuzufügen.
Darüber hinaus gibt es die Pseudoklasse :valid zum Gestalten gültiger Formularelemente.
Es gibt weitere Möglichkeiten, Ihre Designs auf Grundlage der Validierung anzupassen. Im Modul zu CSS erfahren Sie mehr über Stile für Formulare.
Validierung mit JavaScript
Um die Validierung Ihrer Formulare weiter zu verbessern, können Sie die JavaScript Constraint Validation API
Aussagekräftige Fehlermeldungen angeben
Sie haben bereits gelernt, dass Fehlermeldungen nicht in jedem Browser identisch sind. Wie können Sie allen dieselbe Botschaft zeigen?
Verwenden Sie dazu 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.
Warten Sie auf das invalid-Ereignis des definierten Elements.
Dort haben Sie die Nachricht mit setCustomValidity() festgelegt.
In diesem Beispiel wird die Meldung Please enter your name. angezeigt, wenn die Eingabe ungültig ist.
Öffnen Sie die Demo in verschiedenen Browsern. sollten Sie überall dieselbe Nachricht sehen. Versuchen Sie nun, den JavaScript-Code zu entfernen, und versuchen Sie es noch einmal. Die Standardfehlermeldungen werden wieder angezeigt.
Die Constraint Validation API bietet noch viel mehr. Sie erhalten eine detaillierte Übersicht über die Verwendung von die Validierung mit JavaScript weiter unten.
Validierung in Echtzeit
Sie können eine Echtzeitvalidierung in JavaScript hinzufügen, indem Sie auf das onblur-Ereignis eines Formularsteuerelements warten.
und validieren die Eingabe sofort, wenn ein Nutzer ein Formularfeld verlässt.
Klicken Sie in der Demo auf das Formularfeld.
gib „Web“ ein und klicken Sie auf eine andere Stelle auf der Seite.
Unter dem Formularfeld wird die native Fehlermeldung für minlength angezeigt.
Weitere Informationen zum Implementieren Echtzeit-Validierung mit JavaScript.
Wissen testen
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: