Attribute zur Formularvalidierung
Verwenden Sie die Attribute required, minlength, maxlength, pattern, min, max und step und gestalten Sie Validierungszustände mit den Pseudoklassen :valid und :invalid.
Attribute zur Formularvalidierung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Native Browser-Validierung
HTML5 stellt über Attribute eine integrierte Formularvalidierung bereit. Beim Absenden eines Formulars validiert der Browser jedes Feld. Wenn die Validierung fehlschlägt, zeigt er einen nativen Fehlerhinweis an und verhindert die Übermittlung – für einfache Fälle ist kein JavaScript erforderlich.
required
Wenn Sie einem Input, Select oder einer Textarea required hinzufügen, wird das Feld verpflichtend. Der Browser zeigt einen Fehler an, wenn das Feld beim Absenden des Formulars leer ist.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength und maxlength
minlength erzwingt eine Mindestanzahl an Zeichen. maxlength verhindert Eingaben über eine festgelegte Höchstlänge hinaus. Kombinieren Sie beide, um die Komplexität von Passwörtern zu erzwingen oder die Länge von Kommentaren zu begrenzen.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max und step für numerische Inputs
min und max legen den gültigen Bereich für Number- und Date-Inputs fest. step legt die Schrittweite fest – nützlich für Bereiche (5 %), Dezimalgenauigkeit oder reine Datumsangaben.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Validierung mit regulären Ausdrücken
pattern akzeptiert einen regulären JavaScript-Ausdruck. Der Input muss dem Muster entsprechen, damit das Formular übermittelt werden kann. Fügen Sie ein title hinzu, um das erwartete Format im Fehlerhinweis des Browsers zu beschreiben.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Native Validierung deaktivieren
Fügen Sie dem Element <form> novalidate hinzu, um die gesamte native Browser-Validierung zu deaktivieren. Tun Sie dies, wenn Sie eine benutzerdefinierte JavaScript-Validierung implementieren, damit Nutzer eine einheitliche Erfahrung erhalten.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Gültigkeit in JavaScript prüfen
Mit der Constraint Validation API können Sie die Gültigkeit programmgesteuert prüfen: input.validity (ValidityState-Objekt), input.checkValidity() (gibt einen booleschen Wert zurück), input.setCustomValidity(message) (setzt einen benutzerdefinierten Fehler).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Rufen Sie setCustomValidity(message) mit einer nicht leeren Zeichenkette auf, um ein Eingabefeld mit einer benutzerdefinierten Meldung als ungültig zu markieren. Rufen Sie die Methode mit einer leeren Zeichenkette auf, um den Fehler zu löschen. Das ist beispielsweise für serverseitig geprüfte Felder wie die Eindeutigkeit eines Benutzernamens nützlich.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid- und :invalid-Pseudoklassen
Formatieren Sie gültige und ungültige Eingabefelder mit CSS-Pseudoklassen. Achtung: Eingabefelder sind bereits vor der ersten Interaktion des Benutzers :invalid. Verwenden Sie :user-invalid (in modernen Browsern) oder JavaScript, um zunächst eine Klasse 'touched' hinzuzufügen.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Benutzerdefinierte Fehlermeldungen mit reportValidity
form.reportValidity() öffnet die native Validierungsoberfläche des Browsers für alle Felder. Verwenden Sie die Methode, nachdem Sie benutzerdefinierte Validierungsmeldungen gesetzt haben, um sie dem Benutzer anzuzeigen, ohne auf ein Submit-Ereignis zu warten.
Muster für barrierefreie Fehleranzeige
Zeigen Sie Inline-Fehler auf folgende Weise an: 1) aria-invalid="true" am Eingabefeld, 2) ein sichtbarer Fehlerabsatz, der mit aria-describedby verknüpft ist, 3) verschieben Sie den Fokus auf das erste ungültige Feld. So werden alle Benutzer berücksichtigt, einschließlich Benutzer von Screenreadern.
Kurzer Test
Welches Attribut begrenzt ein Texteingabefeld auf maximal 280 Zeichen?
Zusammenfassung: Attribute zur Formularvalidierung
required, minlength/maxlength, min/max/step, pattern — alle bieten eine native Validierung durch den Browser. Verwenden Sie novalidate, wenn Sie eine eigene Validierung mit JavaScript implementieren. Die Constraint Validation API ermöglicht JavaScript den Zugriff auf den Gültigkeitsstatus. Formatieren Sie Fehler mit :user-invalid, nachdem der Benutzer mit dem Feld interagiert hat.
Häufig gestellte Fragen
Ist die Lektion „Attribute zur Formularvalidierung“ kostenlos?
Ja — der vollständige Text von „Attribute zur Formularvalidierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Attribute zur Formularvalidierung“?
Verwenden Sie die Attribute required, minlength, maxlength, pattern, min, max und step und gestalten Sie Validierungszustände mit den Pseudoklassen :valid und :invalid. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Attribute zur Formularvalidierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Formularsteuerelemente: input-Typen, select, textarea
- ARIA und Barrierefreiheit: label, role, aria-*
- Semantisches HTML5: Semantik statt div-Suppe
- Attribute zur Formularvalidierung