HTMLInputElement.reportValidity() — Methode · JavaScript-Referenz

Signatur

HTMLInputElement.prototype.reportValidity()

Beschreibung

reportValidity() führt dieselben Prüfungen durch wie checkValidity(). Dazu gehören required, pattern, min/max, minlength/maxlength, type-Regeln (z. B. email, url) und eigene Fehler, die über setCustomValidity() gesetzt wurden. Ist der Wert ungültig, feuert die Methode am Element das abbrechbare Ereignis invalid. Wird es nicht mit preventDefault() abgebrochen, zeigt der Browser zusätzlich seine eingebaute Fehlermeldung an (meist als Sprechblase) und setzt in der Regel den Fokus auf das Feld.

Einsetzen lässt sich die Methode immer dann, wenn die Validierung nicht erst beim Absenden des Formulars erscheinen soll. Beispiele sind eine Prüfung beim Verlassen des Feldes (blur), mehrstufige Formulare, bei denen man erst weiterblättern darf, wenn alles korrekt ausgefüllt ist, oder Formulare, die per fetch() statt über einen normalen Submit abgeschickt werden.

Der Unterschied zu checkValidity(): checkValidity() meldet das Ergebnis nur stillschweigend als Boolean zurück, reportValidity() zeigt es dem Nutzer auch an. Wenn Sie das ganze Formular prüfen wollen, verwenden Sie HTMLFormElement.reportValidity().

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Wert gültig ist oder das Element gar nicht validiert wird (z. B. bei disabled, readonly oder type="hidden"). false, wenn mindestens eine Regel verletzt ist.

Beispiele

Feld beim Verlassen prüfen

// HTML: <input id="email" type="email" required>
const email = document.querySelector('#email');

email.addEventListener('blur', () => {
  const ok = email.reportValidity();
  console.log('E-Mail gültig:', ok);
});

E-Mail gültig: false (bei leerem Feld, zusätzlich erscheint die Browser-Meldung)

Eigene Fehlermeldung mit setCustomValidity()

// HTML: <input id="pw2" type="password"> (Passwort wiederholen)
const pw1 = document.querySelector('#pw1');
const pw2 = document.querySelector('#pw2');

const checkMatch = () => {
  // Leerer String = kein Fehler
  pw2.setCustomValidity(
    pw1.value === pw2.value ? '' : 'Die Passwörter stimmen nicht überein.'
  );
  return pw2.reportValidity();
};

pw2.addEventListener('change', checkMatch);

false, wenn die Passwörter nicht übereinstimmen; die eigene Meldung wird angezeigt

Mehrstufiges Formular: erst weiter, wenn der Schritt gültig ist

const nextBtn = document.querySelector('#next');

nextBtn.addEventListener('click', () => {
  const step = document.querySelector('.step.active');
  const inputs = [...step.querySelectorAll('input')];

  // Beim ersten ungültigen Feld stoppen, damit nur eine Meldung erscheint
  const allValid = inputs.every((input) => input.reportValidity());

  if (allValid) {
    step.classList.remove('active');
    step.nextElementSibling?.classList.add('active');
  }
});

Browser-Meldung unterdrücken und eigene Anzeige nutzen

const plz = document.querySelector('#plz'); // pattern="\\d{5}" required
const errorEl = document.querySelector('#plz-error');

plz.addEventListener('invalid', (event) => {
  event.preventDefault(); // keine native Sprechblase
  errorEl.textContent = plz.validationMessage;
});

plz.addEventListener('input', () => {
  if (plz.reportValidity()) errorEl.textContent = '';
});

// Wichtig · Fallstricke

Seiteneffekte: Anders als checkValidity() kann reportValidity() den Fokus verschieben und eine Meldung einblenden. Wenn Sie die Methode in einer Schleife über viele Felder aufrufen, sieht der Nutzer meist nur die letzte Meldung. Brechen Sie deshalb beim ersten Fehler ab, zum Beispiel mit every().
Verwenden Sie die Methode nicht in input-Handlern bei jedem Tastendruck, wenn die native Meldung sichtbar bleibt. Das stört beim Tippen erheblich.
Felder mit disabled, readonly oder type="hidden" sowie Felder innerhalb eines <datalist> werden nicht validiert und liefern immer true.
Ein mit setCustomValidity() gesetzter Fehler bleibt bestehen, bis er mit setCustomValidity('') wieder zurückgesetzt wird. Wer das vergisst, hat ein Feld, das dauerhaft ungültig bleibt.
Das Attribut novalidate am Formular verhindert nur die automatische Prüfung beim Absenden. reportValidity() prüft trotzdem.
Wie die Meldung aussieht, wie lange sie sichtbar bleibt und in welcher Sprache sie erscheint, hängt vom Browser ab. Mit CSS lässt sie sich nicht gestalten.
Die clientseitige Validierung ersetzt keine Prüfung auf dem Server, denn sie lässt sich leicht umgehen.
Kompatibilität: Chrome 40+, Firefox 49+, Safari 10.1+ und Edge 17+. Im Internet Explorer gibt es die Methode nicht.

Siehe auch

HTMLInputElement.checkValidity() HTMLInputElement.setCustomValidity() HTMLFormElement.reportValidity() HTMLInputElement.validity HTMLInputElement.validationMessage ValidityState