Die Constraint Validation API

HTML5 führte die integrierte Formularvalidierung über Attribute ein: required, type="email", type="number", min, max, pattern, minlength, maxlength. Der Browser validiert das Formular beim Absenden automatisch und zeigt Fehlermeldungen an, ohne dass JS erforderlich ist.

:invalid trifft auf Eingaben zu, bei denen die Validierung fehlschlägt; :valid trifft auf gültige Eingaben zu. :user-invalid (modern) trifft erst nach einer Interaktion mit dem Benutzer zu – so werden rote Rahmen bei einem unveränderten Formular vermieden. Gestalten Sie Fehler mit diesen Pseudoklassen.

Jedes Formularsteuerelement stellt eine validity-Eigenschaft bereit – ein ValidityState-Objekt mit booleschen Flags: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort usw. Prüfen Sie diese, um zu entscheiden, welche Fehlermeldung angezeigt werden soll.

input.checkValidity() gibt true zurück, wenn der Wert alle Einschränkungen erfüllt, andernfalls false. form.checkValidity() prüft das gesamte Formular. Das ist nützlich für programmatische Prüfungen vor AJAX-Anfragen oder bevor Sie dem Benutzer erlauben, in einem Assistenten fortzufahren.

input.reportValidity() verhält sich wie checkValidity, löst aber zusätzlich den integrierten Tooltip des Browsers aus und setzt den Fokus auf das erste ungültige Feld. Verwenden Sie diese Methode, wenn Sie die native Benutzeroberfläche ohne zusätzlichen Aufwand nutzen möchten; verwenden Sie checkValidity, wenn Sie die Fehleranzeige vollständig selbst gestalten möchten.

Die Standardmeldungen des Browsers („Bitte füllen Sie dieses Feld aus“) passen möglicherweise nicht zu Ihrem Tonfall oder Ihrer Sprache. Überschreiben Sie sie mit input.setCustomValidity("Enter a valid coupon code"). Die Eingabe bleibt ungültig, bis Sie die Meldung mit setCustomValidity("") löschen.

Fügen Sie dem Formular novalidate hinzu, um das standardmäßige Validierungsverhalten des Browsers zu unterdrücken. Das ist nützlich, wenn Sie die Fehleranzeige vollständig selbst implementieren. Das Formular wird unabhängig davon abgesendet, ob es die Validierung bestanden hätte. Prüfen Sie daher vor dem Absenden programmgesteuert.

Jedes Steuerelement löst ein invalid-Ereignis aus, wenn die Validierung fehlschlägt. Reagieren Sie darauf, um den standardmäßigen Tooltip zu unterdrücken und eine eigene Meldung anzuzeigen: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

Das Attribut pattern enthält einen regulären JavaScript-Ausdruck, auf den der Wert vollständig passen muss (die Anker ^ und $ sind nicht erforderlich, da sie implizit gelten). Kombinieren Sie es mit dem Attribut title, um Benutzern das erwartete Format zu beschreiben.

Die HTML-Validierung ist eine Komfortfunktion für Benutzer und kann von jedem umgangen werden, der das DOM bearbeitet. Validieren Sie Daten daher immer erneut auf dem Server. HTML-Einschränkungen dienen der Benutzerfreundlichkeit (sofortiges Feedback, weniger Roundtrips), nicht der Sicherheit.

Einschränkungen werden kombiniert: <input type="number" min="18" max="120" required step="1"> muss vorhanden sein, eine ganze Zahl enthalten und zwischen 18 und 120 liegen. Über die ValidityState-Flags stellt der Browser bereit, welche konkrete Einschränkung verletzt wurde, sodass Sie die passende Meldung anzeigen können.

Wie unterscheidet sich die CSS-Pseudoklasse :user-invalid von :invalid?

Native Validierungsattribute (required, type, pattern, min, max) und die ValidityState-API ermöglichen eine leistungsfähige clientseitige Validierung, standardmäßig ohne JS. Mit CSS :user-invalid gestalten Sie Fehler nach einer Interaktion. checkValidity/reportValidity führen programmatische Prüfungen durch. setCustomValidity überschreibt Standardmeldungen. Validieren Sie Daten immer erneut auf dem Server.