reportValidity und setCustomValidity

Die Constraint Validation API stellt zwei Methoden bereit, die die integrierte Validierungsoberfläche des Browsers steuern: reportValidity (Tooltip anzeigen) und setCustomValidity (eine benutzerdefinierte Fehlermeldung bereitstellen). Zusammen können Sie Meldungen anpassen und zugleich die native Darstellung beibehalten.

checkValidity() gibt stillschweigend true/false zurück – ohne Auswirkungen auf die Benutzeroberfläche. reportValidity() führt dieselbe Prüfung durch, setzt aber zusätzlich den Fokus auf das erste ungültige Feld und zeigt den Validierungstooltip des Browsers an. Wählen Sie reportValidity, wenn Sie die native Benutzerfreundlichkeit ohne zusätzlichen Aufwand nutzen möchten.

Bei mehrstufigen Assistenten sollten Sie die Felder jedes Schritts vor dem Fortfahren validieren: if (step.reportValidity()) { next(); }. Der Browser übernimmt die Fehleranzeige und setzt den Fokus auf das Feld, das Aufmerksamkeit benötigt – Sie müssen die Fokusverwaltung nicht selbst implementieren.

Die Standardmeldungen („Bitte füllen Sie dieses Feld aus“) passen möglicherweise nicht zu Ihrem Tonfall. input.setCustomValidity("Username is required") ersetzt die Standardmeldung durch Ihren Text. Die Eingabe wird als ungültig behandelt, bis Sie die Meldung löschen.

input.setCustomValidity("") entfernt die benutzerdefinierte Meldung und aktiviert die normale Validierung wieder. Rufen Sie dies bei jeder erneuten Validierung auf, da andernfalls veraltete benutzerdefinierte Meldungen bestehen bleiben, selbst nachdem der Benutzer das Problem behoben hat.

Für serverseitige Prüfungen (etwa die Verfügbarkeit eines Benutzernamens oder die Gültigkeit eines Gutscheins) verwenden Sie setCustomValidity nach der asynchronen Antwort: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Der Browser übernimmt den neuen Gültigkeitsstatus sofort.

Wenn Sie Ihre eigene Fehleranzeige verwenden und trotzdem die Gültigkeitsverfolgung beibehalten möchten, reagieren Sie auf das invalid-Ereignis und rufen Sie e.preventDefault() auf, um den nativen Tooltip zu unterdrücken: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

setCustomValidity unterstützt jeweils nur eine benutzerdefinierte Meldung. Um mehrere Regeln durchzusetzen, prüfen Sie jede einzelne und rufen setCustomValidity mit der relevantesten Meldung in Prioritätsreihenfolge auf. Die erste verletzte Regel wird angezeigt.

Wenn Sie für ein leeres Pflichtfeld eine benutzerdefinierte Meldung setzen, können Ihre Meldung und die Standardmeldung miteinander in Konflikt geraten. Wählen Sie pro Feld einen Ansatz: Deaktivieren Sie entweder die integrierte Einschränkung (verwenden Sie type="text" anstelle von type="email" und validieren Sie über setCustomValidity), oder verlassen Sie sich vollständig auf die integrierte Validierung.

Bei feldübergreifender Validierung (etwa beim Abgleich der Passwortbestätigung) wenden Sie setCustomValidity auf das zugehörige Feld an: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Das Formular bleibt ungültig, bis beide Werte übereinstimmen.

Integrierte Meldungen werden vom Browser anhand der Sprache des Benutzers lokalisiert. Benutzerdefinierte Meldungen, die über setCustomValidity gesetzt werden, müssen Sie selbst in der richtigen Sprache bereitstellen. Lesen Sie navigator.language oder Ihren eigenen i18n-Status aus und liefern Sie die passende Übersetzung.

Öffnen Sie die DevTools und probieren Sie jeden ungültigen Ablauf aus: Absenden eines leeren Formulars, unvollständige Eingaben, nicht übereinstimmende Formate und asynchrone Fehler. Überprüfen Sie, ob die richtige Meldung angezeigt wird, ob das Beheben des Problems sie löscht und ob ein gültiges Formular abgesendet wird. Sonderfälle wie das Einfügen eines ungültigen Formats oder das automatische Ausfüllen durch den Browser verdienen eigene Tests.

Wie teilen Sie dem Browser mit, dass die Eingabe nach dem Aufruf von input.setCustomValidity("Already taken") wieder gültig ist?

reportValidity löst die integrierte Validierungsoberfläche des Browsers aus (Fokus und Tooltip) und eignet sich daher ideal für programmatische Prüfungen. setCustomValidity überschreibt Standardmeldungen mit Ihrem Text – löschen Sie ihn mit einer leeren Zeichenfolge, sobald die Eingabe wieder gültig ist. Reagieren Sie mit preventDefault auf das invalid-Ereignis, um vollständig eigene Fehleranzeigen zu erstellen. Verwenden Sie diese Möglichkeiten für feldübergreifende Validierung, asynchrone Prüfungen und lokalisierte benutzerdefinierte Meldungen.