HTMLFieldSetElement.reportValidity() — Methode · JavaScript-Referenz

Signatur

HTMLFieldSetElement.prototype.reportValidity()

Beschreibung

Die Methode reportValidity() gehört zur Constraint Validation API. Sie prüft zunächst, ob das Element gültig ist, genau wie checkValidity(). Ist es ungültig, löst sie das Ereignis invalid aus. Wird dieses Ereignis nicht abgebrochen, zeigt der Browser dem Nutzer eine Fehlermeldung an, zum Beispiel als Sprechblase am Feld.

Wichtige Besonderheit: Laut HTML-Spezifikation ist ein <fieldset> nie selbst Gegenstand der Validierung. Deshalb ist fieldset.willValidate immer false, und reportValidity() gibt beim <fieldset> immer true zurück. Die Methode prüft die enthaltenen Eingabefelder nicht mit, und sie zeigt keine Fehlermeldungen an.

Die Methode gibt es vor allem, damit alle formularbezogenen Elemente dieselbe Schnittstelle haben. Wer wirklich einen Abschnitt eines Formulars prüfen will, etwa einen Schritt in einem mehrstufigen Assistenten, geht die Elemente in fieldset.elements durch und ruft reportValidity() für jedes Element einzeln auf. Man kann auch gleich HTMLFormElement.reportValidity() für das ganze Formular verwenden.

Rückgabewert

Typ

boolean

Beschreibung

Beim <fieldset> immer true, weil das Element selbst nie validiert wird. Allgemein bedeutet true „gültig“ und false „ungültig, das Problem wurde gemeldet“.

Beispiele

Direkter Aufruf gibt immer true zurück

// HTML: <form><fieldset id="adresse"><input name="plz" required></fieldset></form>
const fieldset = document.querySelector('#adresse');

// Das Pflichtfeld ist leer, trotzdem gibt der Aufruf true zurück
console.log(fieldset.willValidate);      // false
console.log(fieldset.reportValidity());  // true
console.log(fieldset.checkValidity());   // true

false true true

Einen fieldset-Abschnitt wirklich prüfen (mehrstufiges Formular)

// Prüft alle Felder im fieldset und zeigt die Fehlermeldung am ersten ungültigen Feld an
const reportFieldsetValidity = (fieldset) => {
  const controls = [...fieldset.elements].filter((el) => el.willValidate);
  // every() bricht beim ersten ungültigen Feld ab, sodass nur eine Meldung erscheint
  return controls.every((el) => el.reportValidity());
};

const schritt1 = document.querySelector('#schritt-1');
document.querySelector('#weiter').addEventListener('click', () => {
  if (reportFieldsetValidity(schritt1)) {
    schritt1.hidden = true;
    document.querySelector('#schritt-2').hidden = false;
  }
});

Eigene Fehleranzeige statt Browser-Meldung

const fieldset = document.querySelector('#kontakt');

for (const el of fieldset.elements) {
  el.addEventListener('invalid', (event) => {
    event.preventDefault(); // unterdrückt die Standard-Sprechblase des Browsers
    el.classList.add('fehler');
    el.nextElementSibling.textContent = el.validationMessage;
  });
}

const ok = [...fieldset.elements]
  .filter((el) => el.willValidate)
  .map((el) => el.reportValidity()) // map statt every: alle Felder werden markiert
  .every(Boolean);
console.log('Abschnitt gültig:', ok);

Abschnitt gültig: false

// Wichtig · Fallstricke

Häufiger Fallstrick: fieldset.reportValidity() prüft die enthaltenen Felder nicht, sondern gibt immer true zurück. Um einen Abschnitt zu prüfen, geht man fieldset.elements durch oder verwendet form.reportValidity().
Ein <fieldset disabled> deaktiviert alle enthaltenen Felder. Deaktivierte Felder werden nie validiert, willValidate ist dann false.
Ein novalidate am Formular hat keinen Einfluss auf direkte Aufrufe von reportValidity() an einzelnen Feldern.
Wird die Methode an einem Feld aufgerufen, das nicht sichtbar ist (hidden oder display: none), kann der Browser die Fehlermeldung nicht anzeigen. Das Ergebnis ist trotzdem korrekt.
Die Methode wird in allen modernen Browsern unterstützt. Der Internet Explorer unterstützt sie nicht.

Siehe auch

HTMLFieldSetElement.checkValidity() HTMLFieldSetElement.elements HTMLFormElement.reportValidity() HTMLInputElement.reportValidity() HTMLInputElement.setCustomValidity() ValidityState