Signatur
Beschreibung
Die Eigenschaft validity liefert ein ValidityState-Objekt, dessen boolesche Eigenschaften (valid, valueMissing, customError usw.) beschreiben, ob das Element seine Validierungsregeln erfüllt. Die Eigenschaft ist schreibgeschützt. Das Objekt ist aber „live“: Es zeigt immer den aktuellen Zustand.
Wichtig: Ein <fieldset> ist laut HTML-Spezifikation kein Kandidat für die Constraint Validation. fieldset.willValidate ist deshalb immer false. validity.valid sagt also nichts darüber aus, ob die Formularfelder im Fieldset gültig sind. Ein Fieldset hat weder required noch pattern und keinen eigenen Wert.
In der Praxis gibt es validity am Fieldset vor allem, weil alle formularbezogenen Elemente dasselbe Interface haben sollen. Um eine Gruppe von Feldern zu prüfen, gehen Sie die Kind-Steuerelemente über fieldset.elements durch und werten deren validity aus. Alternativ nutzen Sie die CSS-Pseudoklassen :valid/:invalid. Moderne Browser wenden sie auch auf ein <fieldset> an, wenn es ungültige Nachfahren enthält.
Rückgabewert
ValidityState-Objekt mit den Eigenschaften valid, valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput und customError.Beispiele
ValidityState eines Fieldsets auslesen
// HTML: <fieldset id="adresse"><input name="plz" required></fieldset>
const fieldset = document.querySelector('#adresse');
console.log(fieldset.validity instanceof ValidityState);
console.log(fieldset.willValidate);
// Das Fieldset wird nicht selbst validiert, sein Zustand bleibt 'gültig'
console.log(fieldset.validity.valid);Gültigkeit einer Feldgruppe über fieldset.elements prüfen
// HTML:
// <fieldset id="kontakt">
// <input name="email" type="email" required>
// <input name="tel" pattern="[0-9 +]+">
// </fieldset>
const fieldset = document.querySelector('#kontakt');
const isGroupValid = (fs) =>
[...fs.elements]
.filter((el) => el.willValidate)
.every((el) => el.validity.valid);
const fehlerDerGruppe = (fs) =>
[...fs.elements]
.filter((el) => el.willValidate && !el.validity.valid)
.map((el) => `${el.name}: ${el.validationMessage}`);
console.log(isGroupValid(fieldset));
console.log(fehlerDerGruppe(fieldset));Mehrstufiges Formular: Schritt nur bei gültiger Gruppe freigeben
const schritte = [...document.querySelectorAll('form fieldset.schritt')];
const weiterButton = document.querySelector('#weiter');
let aktuell = 0;
weiterButton.addEventListener('click', () => {
const fs = schritte[aktuell];
// fs.validity.valid wäre immer true, deshalb die Kinder prüfen
const ersterFehler = [...fs.elements].find(
(el) => el.willValidate && !el.validity.valid
);
if (ersterFehler) {
ersterFehler.reportValidity(); // zeigt die native Fehlermeldung an
return;
}
fs.hidden = true;
aktuell += 1;
schritte[aktuell].hidden = false;
});// Wichtig · Fallstricke
- Häufiger Fehler: Wer
fieldset.validity.validoderfieldset.checkValidity()nutzt, um die enthaltenen Felder zu prüfen, bekommt praktisch immertrue, weil das Fieldset von der Constraint Validation ausgeschlossen ist. Prüfen Sie stattdessen die Einträge vonfieldset.elements. - Ob
setCustomValidity()am Fieldsetvalidity.customErrorsetzt, hängt vom Browser ab. Verlassen Sie sich für Formularlogik nicht darauf. - Ein
disabled-Fieldset deaktiviert alle Kind-Steuerelemente (außer denen im ersten<legend>). Diese Kinder haben dannwillValidate === falseund werden bei der Validierung übersprungen. - Die CSS-Pseudoklassen
:invalid/:validam<fieldset>(abhängig von den Nachfahren) werden in aktuellen Versionen von Chrome, Firefox und Safari unterstützt. Ältere Browser kennen sie nicht. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie
fieldset.validity = …wird ignoriert bzw. löst im Strict Mode einenTypeErroraus.