HTMLFieldSetElement.checkValidity() — Methode · JavaScript-Referenz

Signatur

HTMLFieldSetElement.prototype.checkValidity()

Beschreibung

checkValidity() gibt es auf allen formularbezogenen Elementen. Beim HTMLFieldSetElement ist die Methode aber praktisch wirkungslos. Laut HTML-Spezifikation ist ein <fieldset> nie ein Kandidat für die Constraint-Validierung. Daher gibt die Methode immer true zurück und löst nie ein invalid-Ereignis aus. Dabei spielt es keine Rolle, ob Felder innerhalb des fieldsets ungültig sind.

Die Methode gibt es vor allem, damit alle Formular-Elemente einheitlich dieselbe Schnittstelle anbieten, also dieselbe ConstraintValidation-API. Passend dazu ist fieldset.willValidate immer false, fieldset.validity.valid immer true und fieldset.validationMessage immer ein leerer String.

Oft soll ein Abschnitt eines Formulars geprüft werden, etwa ein Schritt in einem mehrstufigen Formular. Dafür geht man in einer Schleife über fieldset.elements und ruft checkValidity() oder reportValidity() auf jedem einzelnen Steuerelement auf. Man kann auch prüfen, ob das fieldset die CSS-Pseudoklasse :invalid trifft. Diese Pseudoklasse spiegelt nämlich die Gültigkeit der enthaltenen Elemente wider.

Rückgabewert

Typ

boolean

Beschreibung

Immer true, weil ein <fieldset> nie validiert wird.

Beispiele

checkValidity() ignoriert ungültige Kind-Elemente

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

// Das Pflichtfeld ist leer und damit ungültig
console.log(email.checkValidity());    // false
console.log(fieldset.checkValidity()); // true – immer!
console.log(fieldset.willValidate);    // false

false true false

Einen Abschnitt tatsächlich prüfen (mehrstufiges Formular)

// Prüft alle Steuerelemente eines fieldsets und zeigt die erste Fehlermeldung an
const validateFieldset = (fieldset) =>
  Array.from(fieldset.elements)
    .filter((el) => el.willValidate)
    .every((el) => el.reportValidity());

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

Alternative: :invalid-Pseudoklasse abfragen

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

// :invalid trifft ein fieldset, sobald ein enthaltenes Element ungültig ist
const hatFehler = fieldset.matches(':invalid');
console.log(hatFehler ? 'Abschnitt unvollständig' : 'Abschnitt ok');

Abschnitt unvollständig

// Wichtig · Fallstricke

Häufiger Fehler: fieldset.checkValidity() sieht so aus, als würde es den ganzen Abschnitt prüfen. Das tut es nicht. Wer sich darauf verlässt, lässt ungültige Eingaben durch. Nutzen Sie stattdessen fieldset.elements oder form.checkValidity().
Auf einem fieldset wird nie ein invalid-Ereignis ausgelöst. Auch setCustomValidity() auf dem fieldset hat keine Wirkung.
Das Attribut disabled am fieldset deaktiviert alle enthaltenen Steuerelemente, außer denen im ersten <legend>. Deaktivierte Steuerelemente werden nicht validiert (willValidate === false).
Kompatibilität: Die Methode wird von allen aktuellen Browsern unterstützt. Dass :invalid auch auf <fieldset> greift, gilt in allen modernen Browsern, in sehr alten Versionen aber nicht.

Siehe auch

HTMLFieldSetElement.reportValidity() HTMLFieldSetElement.setCustomValidity() HTMLSelectElement.checkValidity() HTMLInputElement.checkValidity() HTMLFormElement.checkValidity()