HTMLFieldSetElement.validationMessage — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFieldSetElement.validationMessage

Beschreibung

Die schreibgeschützte Eigenschaft validationMessage gehört zur Constraint Validation API, also zur eingebauten Formularprüfung des Browsers. Bei Eingabeelementen enthält sie die lokalisierte Fehlermeldung, die der Browser auch in seiner Sprechblase anzeigt, zum Beispiel „Bitte füllen Sie dieses Feld aus.“

Ein <fieldset> ist laut HTML-Spezifikation aber nie ein Kandidat für die Formularprüfung. willValidate ist daher immer false, und validationMessage liefert immer eine leere Zeichenkette. Das gilt auch, wenn die Felder im Fieldset ungültig sind oder zuvor setCustomValidity() aufgerufen wurde.

Die Eigenschaft gibt es auf dem Fieldset nur, damit alle formularbezogenen Elemente dieselbe Schnittstelle haben. Wenn du die Fehlermeldungen einer Gruppe sammeln willst, gehst du über fieldset.elements und liest validationMessage der einzelnen Steuerelemente aus.

Rückgabewert

Typ

string

Beschreibung

Beim <fieldset> immer "" (leere Zeichenkette), weil das Element nicht selbst validiert wird.

Beispiele

Fieldset liefert immer eine leere Meldung

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

console.log(JSON.stringify(fieldset.validationMessage));
console.log(fieldset.willValidate);
console.log(plz.validationMessage); // Browser-Text, hier Chrome auf Deutsch

"" false Füllen Sie dieses Feld aus.

Fehlermeldungen aller Felder einer Gruppe sammeln

const getFieldsetErrors = (fieldset) =>
  Array.from(fieldset.elements)
    .filter((el) => el.willValidate && !el.validity.valid)
    .map((el) => ({ name: el.name, message: el.validationMessage }));

const fieldset = document.querySelector('#adresse');
const errors = getFieldsetErrors(fieldset);

if (errors.length > 0) {
  console.table(errors);
}

Tabelle mit name und message aller ungültigen Felder

setCustomValidity() ändert beim Fieldset nichts

const fieldset = document.createElement('fieldset');
fieldset.setCustomValidity('Gruppe unvollständig');

console.log(JSON.stringify(fieldset.validationMessage));
console.log(fieldset.checkValidity());

"" true

// Wichtig · Fallstricke

Fallstrick: Verlasse dich nicht auf fieldset.validationMessage oder fieldset.checkValidity(), um eine Gruppe zu prüfen. Beide melden immer „gültig“. Prüfe stattdessen die Elemente in fieldset.elements.
Die CSS-Pseudoklasse :invalid greift in modernen Browsern trotzdem beim <fieldset>, wenn ein enthaltenes Feld ungültig ist. Die Gestaltung und die API verhalten sich hier also unterschiedlich.
Der Text der Meldungen in den Kindelementen hängt von Browser und Sprache ab. Vergleiche ihn deshalb nicht mit festen Zeichenketten, sondern werte validity aus.
Ein disabled-Fieldset nimmt alle enthaltenen Felder aus der Prüfung heraus. Deren validationMessage ist dann ebenfalls leer.

Siehe auch

HTMLFieldSetElement.validity HTMLFieldSetElement.willValidate HTMLFieldSetElement.disabled HTMLFieldSetElement.elements HTMLFieldSetElement.name