Native HTML-Validierungsattribute, die Entwickler oft übersehen

Sie schreiben eigenes JavaScript zur Validierung von Formularen, die HTML nativ handhaben könnte. Die meisten Frontend-Entwickler kennen required und pattern, aber die Plattform bietet weit mehr – Attribute, die Code reduzieren, die Barrierefreiheit verbessern und eine bessere UX ohne Framework-Abhängigkeiten schaffen.

Dieser Artikel behandelt die HTML-Validierungsattribute, die Sie wahrscheinlich übersehen, sowie die CSS- und JavaScript-Features, die native Formularvalidierung wirklich nützlich machen.

Das form-Attribut: Controls außerhalb von Formularen

Benötigen Sie einen Submit-Button im Seitenkopf, während das Formular im Hauptinhalt liegt? Das form-Attribut ermöglicht es jedem Control, sich unabhängig von der DOM-Position per ID mit einem Formular zu verknüpfen.

<form id="checkout">
  <input type="email" name="email" required>
</form>

<button type="submit" form="checkout">Kauf abschließen</button>

Dies eliminiert Wrapper-Akrobatik und funktioniert gleichermaßen mit Inputs, Buttons, Selects und Textareas.

Button-spezifische Überschreibungen, die Sie kennen sollten

Ein einzelnes Formular kann sich je nach submittendem Button unterschiedlich verhalten. Diese Attribute überschreiben die Einstellungen des übergeordneten Formulars:

• formaction — An eine andere URL senden
• formmethod — GET statt POST verwenden (oder umgekehrt)
• formenctype — Kodierung für Datei-Uploads ändern
• formtarget — Antwort in neuem Tab öffnen
• formnovalidate — Validierung vollständig überspringen

Das formnovalidate-Attribut verdient besondere Aufmerksamkeit. Es ist unverzichtbar für „Entwurf speichern”-Buttons, bei denen unvollständige Daten akzeptabel sind.

Pattern-Validierung mit aussagekräftigen Fehlermeldungen

Das pattern-Attribut akzeptiert Regex, aber Browser zeigen standardmäßig generische Fehler an. Kombinieren Sie es mit title, um Kontext bereitzustellen:

<input type="text" 
       pattern="[A-Z]{2}[0-9]{6}" 
       title="Format: Zwei Buchstaben gefolgt von sechs Ziffern (z.B. AB123456)">

Hinweis: Wenn multiple bei Inputs wie type="email" gesetzt ist, wird das Pattern auf jeden einzelnen Wert angewendet, nicht auf die gesamte kommagetrennte Zeichenkette.

Moderne autocomplete-Tokens

Über on und off hinaus akzeptiert autocomplete semantische Tokens, die die Autofill-Genauigkeit verbessern:

• autocomplete="new-password" — Aktiviert Passwort-Generatoren
• autocomplete="one-time-code" — Optimiert für SMS-Verifizierung
• autocomplete="webauthn" — Signalisiert Passkey-Credential-Felder

Diese Tokens reduzieren Reibung und signalisieren Absicht an Browser und Passwort-Manager (siehe die vollständige Token-Liste in der HTML-Spezifikation und MDNs autocomplete-Dokumentation).

Das dirname-Attribut für Internationalisierung

Bei der Unterstützung von Rechts-nach-Links-Sprachen übermittelt dirname automatisch die Textrichtung zusammen mit dem Wert:

<input type="text" name="comment" dirname="comment.dir">

Das Formular übermittelt sowohl comment (den Wert) als auch comment.dir (ltr oder rtl). Unverzichtbar für die korrekte Darstellung von benutzergenerierten Inhalten.

Die readonly-Nuance

Ein häufiges Missverständnis: readonly-Felder nehmen an der Formularübermittlung teil, verhalten sich aber bei der Validierung anders. Sie übermitteln Werte und können fokussiert werden.

Allerdings sind readonly-Controls in modernem HTML von der Constraint-Validierung ausgeschlossen. Das bedeutet, dass Attribute wie required, pattern, min oder max für Validierungszwecke bei readonly-Inputs in allen aktuellen Evergreen-Browsern ignoriert werden.

Wenn Sie einen Wert anzeigen möchten, ohne Bearbeitung zuzulassen und ohne ihn zu übermitteln, ist disabled oft die bessere Wahl – allerdings übermitteln deaktivierte Felder ihre Werte nicht.

CSS :user-invalid für moderne Formular-UX

Die klassische :invalid-Pseudoklasse greift sofort und zeigt Fehler vor Benutzerinteraktion. Die neuere :user-invalid passt erst nach Benutzerinteraktion – und löst damit das Problem der „roten Rahmen beim Seitenladen”.

input:user-invalid {
  border-color: #dc3545;
}

input:user-valid {
  border-color: #28a745;
}

Dies schafft bessere UX ohne JavaScript-Timing-Logik. Die Browser-Unterstützung ist mittlerweile solide in allen Evergreen-Browsern (siehe :user-invalid auf MDN).

Die Constraint Validation API

Wenn native Validierung erweitert werden muss, bietet die Constraint Validation API programmatische Kontrolle:

• checkValidity() — Gibt Boolean zurück, löst bei Fehler invalid-Event aus
• reportValidity() — Gibt Boolean zurück und zeigt native Fehler-UI
• setCustomValidity() — Setzt benutzerdefinierte Fehlermeldungen

const password = document.querySelector('#password');
const confirm = document.querySelector('#confirm');

confirm.addEventListener('input', () => {
  confirm.setCustomValidity(
    password.value !== confirm.value ? 'Passwörter müssen übereinstimmen' : ''
  );
});

Rufen Sie setCustomValidity('') auf, um Fehler zu löschen – die Übergabe einer nicht-leeren Zeichenkette markiert das Feld als ungültig.

Wenn native Validierung an ihre Grenzen stößt

Native Validierung deckt die meisten Fälle ab, hat aber Grenzen:

• Feldübergreifende Validierung (Passwortbestätigung) erfordert JavaScript
• Fehlermeldungs-Styling wird vom Browser kontrolliert
• Komplexe asynchrone Validierung (Benutzernamen-Verfügbarkeit) benötigt eigenen Code

Die Strategie: Verwenden Sie HTML-Validierungsattribute als Grundlage, stylen Sie mit CSS :user-invalid und fügen Sie die Constraint Validation API nur dort hinzu, wo nötig.

Fazit

Native Formularvalidierung hat sich erheblich weiterentwickelt. Die hier behandelten Attribute – form, Button-spezifische Überschreibungen, dirname, moderne autocomplete-Tokens – eliminieren erhebliches eigenes JavaScript und verbessern standardmäßig die Barrierefreiheit.

Überprüfen Sie Ihre bestehenden Formulare. Sie werden wahrscheinlich Validierungslogik finden, die HTML nativ handhabt, und UX-Probleme, die CSS :user-invalid ohne einen einzigen Event-Listener löst.

FAQs

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.