HTMLFormElement.reportValidity() — Methode · JavaScript-Referenz

Signatur

HTMLFormElement.prototype.reportValidity()

Beschreibung

reportValidity() führt dieselbe Prüfung durch wie checkValidity(): Jedes Steuerelement des Formulars, das an der Validierung teilnimmt, wird gegen seine Regeln geprüft, z. B. required, pattern, min/max, type="email" oder eigene Meldungen über setCustomValidity(). Für jedes ungültige Feld wird ein abbrechbares invalid-Event ausgelöst.

Anders als checkValidity() meldet reportValidity() das Ergebnis dem Nutzer: Der Browser zeigt die native Fehler-Sprechblase am ersten ungültigen Feld an und setzt in der Regel den Fokus darauf. Das gilt nicht, wenn das invalid-Event mit preventDefault() abgebrochen wurde.

Typische Einsätze: Formulare, die per JavaScript abgeschickt werden (etwa mit fetch() statt nativem Absenden), mehrstufige Formulare („Weiter“-Schaltfläche) oder Formulare mit novalidate, bei denen du den Zeitpunkt der Prüfung selbst steuern willst. Wenn du nur einen Wahrheitswert brauchst und keine Meldung anzeigen willst, nimm checkValidity().

Rückgabewert

Typ

boolean

Beschreibung

true, wenn alle Steuerelemente gültig sind, sonst false.

Beispiele

Formular vor dem Absenden per fetch() prüfen

// HTML: <form id="kontakt" novalidate>
//   <input name="email" type="email" required>
//   <button>Senden</button>
// </form>
const form = document.querySelector('#kontakt');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Zeigt dem Nutzer die Browser-Fehlermeldung, falls ungültig
  if (!form.reportValidity()) {
    console.log('Formular ungültig – Absenden abgebrochen');
    return;
  }

  const response = await fetch('/api/kontakt', {
    method: 'POST',
    body: new FormData(form)
  });
  console.log('Status:', response.status);
});

Formular ungültig – Absenden abgebrochen

Eigene Fehlermeldung mit setCustomValidity()

const form = document.querySelector('#registrierung');
const passwort = form.elements.passwort;
const wiederholung = form.elements.wiederholung;

const pruefen = () => {
  wiederholung.setCustomValidity(
    passwort.value === wiederholung.value
      ? ''
      : 'Die Passwörter stimmen nicht überein.'
  );
};

wiederholung.addEventListener('input', pruefen);

document.querySelector('#pruefen').addEventListener('click', () => {
  pruefen();
  const ok = form.reportValidity();
  console.log('Gültig:', ok);
});

Gültig: false

Mehrstufiges Formular: nur weiter bei gültiger Eingabe

// Jeder Schritt ist ein eigenes <form>-Element
const schritte = [...document.querySelectorAll('form.schritt')];
let aktuell = 0;

document.querySelector('#weiter').addEventListener('click', () => {
  const form = schritte[aktuell];
  if (!form.reportValidity()) return; // Meldung wird angezeigt

  form.hidden = true;
  aktuell += 1;
  schritte[aktuell].hidden = false;
  console.log(`Schritt ${aktuell + 1} von ${schritte.length}`);
});

Schritt 2 von 3

Browser-Sprechblase unterdrücken, eigene Anzeige nutzen

const form = document.querySelector('form');

// Wird für jedes ungültige Feld ausgelöst (bubbelt nicht → capture nutzen)
form.addEventListener('invalid', (event) => {
  event.preventDefault(); // keine native Sprechblase
  const feld = event.target;
  feld.classList.add('fehler');
  console.log(`${feld.name}: ${feld.validationMessage}`);
}, true);

form.reportValidity();

email: Füllen Sie dieses Feld aus.

// Wichtig · Fallstricke

Das invalid-Event bubbelt nicht. Wenn du es am <form> abfangen willst, registriere den Listener in der Capture-Phase (addEventListener('invalid', fn, true)).
reportValidity() löst kein submit-Event aus und schickt das Formular nicht ab. Wenn du natives Absenden mit Validierung willst, nimm form.requestSubmit(). form.submit() überspringt die Validierung dagegen ganz.
Das Attribut novalidate verhindert nur die automatische Prüfung beim Absenden. reportValidity() prüft und meldet trotzdem.
Felder mit disabled, readonly oder type="hidden" und Elemente in <datalist> werden nicht geprüft.
Eine mit setCustomValidity() gesetzte Meldung bleibt, bis du sie mit setCustomValidity('') wieder löschst. Sonst bleibt das Feld dauerhaft ungültig.
Aussehen und Text der nativen Sprechblase hängen von Browser und Sprache ab und lassen sich nicht per CSS gestalten.
Clientseitige Validierung ersetzt nie die Prüfung auf dem Server, denn sie lässt sich leicht umgehen.
Kompatibilität: Chrome 40+, Firefox 49+, Safari 10.1+, Edge 17+. Im Internet Explorer gibt es die Methode nicht.

Siehe auch

HTMLFormElement.checkValidity() HTMLFormElement.requestSubmit() HTMLFormElement.submit() HTMLInputElement.reportValidity() HTMLInputElement.setCustomValidity() ValidityState HTMLFormElement