HTML bietet integrierte Validierung über Attribute, sodass der Browser ungültige Eingaben blockiert und Meldungen anzeigt – kein JavaScript erforderlich.
html
Submit
HTML bietet integrierte Validierung über Attribute, sodass der Browser ungültige Eingaben blockiert und Meldungen anzeigt – kein JavaScript erforderlich.
Submit
Die Validierungsattribute: required, min/max, minlength/maxlength, pattern (Regex) und der Typ selbst (email, url, number). Bei der Übermittlung prüft der Browser diese, stoppt die Übermittlung, falls etwas fehlschlägt, und zeigt eine native Sprechblase beim ersten ungültigen Feld an.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Sie können die Validierung in JavaScript lesen und anpassen:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity ermöglicht es Ihnen, Regeln hinzuzufügen, die Attribute nicht ausdrücken können (z. B. "Passwort bestätigung stimmt überein").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Validieren Sie immer auch auf dem Server – Client-Validierung ist für das Benutzererlebnis; Benutzer können sie umgehen.
Native Validierung bietet Ihnen kostenlos barrierefreie, lokalisierte Fehlermeldungen und sofortige Rückmeldung.
Kombinieren Sie die deklarativen Attribute mit der Constraint Validation API für benutzerdefinierte Regeln – vertrauen Sie aber niemals darauf, dass dies Ihre einzige Verteidigungslinie ist; der Server muss auch validieren.