Signatur
Beschreibung
Die schreibgeschützte Eigenschaft validationMessage gehört zur Constraint Validation API, der Schnittstelle für die Formularvalidierung. Sie liefert die Fehlermeldung, die der Browser anzeigen würde, wenn das Element auf seine Gültigkeit geprüft würde. Bei Eingabeelementen wie <input> steht darin zum Beispiel „Bitte füllen Sie dieses Feld aus.“ in der Sprache des Browsers.
Beim <output>-Element gibt es eine Besonderheit: Laut HTML-Spezifikation wird es nie in die Formularvalidierung einbezogen. Deshalb ist willValidate immer false. Die Spezifikation legt fest, dass validationMessage in diesem Fall einen leeren String zurückgibt. Das gilt auch dann, wenn vorher mit setCustomValidity() eine eigene Meldung gesetzt wurde.
Die Eigenschaft gibt es vor allem, damit alle formularbezogenen Elemente dieselbe Schnittstelle haben. Code, der generisch über form.elements läuft, kann validationMessage also bei jedem Element abfragen, ohne vorher den Typ zu prüfen. Für echte Fehlermeldungen bei berechneten Werten sollten Sie die Eingabefelder validieren, aus denen der Wert berechnet wird, oder die Meldung selbst im DOM anzeigen.
Rückgabewert
<output>-Element immer ein leerer String (""), weil das Element nie validiert wird.Beispiele
Validierungsmeldung auslesen
// <output id="summe" name="summe">0</output>
const ausgabe = document.querySelector('#summe');
console.log(JSON.stringify(ausgabe.validationMessage));
console.log(ausgabe.willValidate);setCustomValidity() ändert nichts an der Meldung
const ausgabe = document.createElement('output');
ausgabe.setCustomValidity('Summe darf nicht negativ sein');
// validity.customError wird gesetzt, aber das Element wird nicht validiert
console.log(ausgabe.validity.customError);
console.log(JSON.stringify(ausgabe.validationMessage));
console.log(ausgabe.checkValidity());Fehlermeldungen aller Formularelemente sammeln
// <form id="rechner">
// <input name="a" type="number" required>
// <input name="b" type="number" required>
// <output name="ergebnis"></output>
// </form>
const form = document.querySelector('#rechner');
const fehler = [...form.elements]
.filter((el) => el.validationMessage !== '')
.map((el) => `${el.name}: ${el.validationMessage}`);
// <output> wird automatisch übersprungen, weil seine Meldung leer ist
console.log(fehler);Eigene Fehleranzeige für berechnete Werte
const form = document.querySelector('#rechner');
const ergebnis = form.elements.ergebnis;
const eingabeB = form.elements.b;
form.addEventListener('input', () => {
const summe = Number(form.elements.a.value) + Number(eingabeB.value);
// Das Eingabefeld validieren, nicht die Ausgabe
eingabeB.setCustomValidity(summe < 0 ? 'Die Summe darf nicht negativ sein.' : '');
ergebnis.value = eingabeB.validationMessage || String(summe);
});// Wichtig · Fallstricke
- Immer leer: Da
<output>nie validiert wird, gibtvalidationMessageauch nachsetCustomValidity()nur""zurück. AuchcheckValidity()undreportValidity()liefern immertrueund zeigen keine Meldung an. - Schreibgeschützt: Wenn Sie der Eigenschaft einen Wert zuweisen, wird das im normalen Modus stillschweigend ignoriert. Im Strict Mode wird ein
TypeErrorausgelöst. - Sprache: Bei anderen Elementen hängt der Text von der Sprache des Browsers ab und unterscheidet sich zwischen Browsern. Vergleichen Sie im Code deshalb nicht mit festen Meldungstexten, sondern prüfen Sie
validity. - Kompatibilität: Wird von allen modernen Browsern unterstützt, nicht aber vom Internet Explorer, der
<output>nicht kennt.