Nutze required, pattern, inputmode und die Constraint Validation API für robuste Formulare ohne jede externe Bibliothek.
Diese Lektion in Kodokon öffnenDer Browser bringt eine vollständige Validierungs-Engine mit, die viele Teams aus Gewohnheit in JavaScript nachbauen. Die Bausteine: required (Pflichtfeld), die Typen (email, url, date), die das Format prüfen, minlength/maxlength, min/max/step für numerische Werte und pattern, das einen regulären Ausdruck akzeptiert. Entscheidendes Detail: pattern ist implizit verankert - der gesamte Wert muss passen, als wäre der reguläre Ausdruck von ^ und $ umschlossen. Ergänze autocomplete mit den standardisierten Werten (postal-code, email, tel): Das ist zugleich UX und Barrierefreiheit.
<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text"
required pattern="[0-9]{5}"
inputmode="numeric"
autocomplete="postal-code">Das Attribut inputmode wird oft missverstanden: Es validiert nichts. Es sagt dem mobilen System lediglich, welche virtuelle Tastatur es anzeigen soll (numeric, tel, email, decimal, search). Deshalb ist die Kombination type="text" + inputmode="numeric" + pattern das empfohlene Muster für numerische Codes: Du bekommst die richtige Tastatur, ohne dir die Verhaltensweisen von type="number" einzuhandeln.
input:user-invalid {
border: 2px solid #b3261e;
}
input:user-valid {
border: 2px solid #1b5e20;
}Auf der CSS-Seite bevorzuge :user-invalid gegenüber :invalid: Letzteres greift, sobald die Seite lädt, und färbt Felder rot, die der Nutzer noch nicht einmal berührt hat. Auf der JavaScript-Seite rundet die Constraint Validation API das Werkzeug ab: checkValidity() löst die Prüfung aus, das Objekt validity legt die genaue Ursache offen (patternMismatch, valueMissing, tooShort), und setCustomValidity() erlaubt dir, die generischen Meldungen des Browsers durch eigene zu ersetzen.
const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
if (zip.validity.patternMismatch) {
zip.setCustomValidity("Enter 5 digits.");
} else {
zip.setCustomValidity("");
}
});