Signatur
Beschreibung
Die Eigenschaft validity eines HTMLOutputElement liefert ein ValidityState-Objekt. Dessen boolesche Eigenschaften wie valid, customError, valueMissing oder patternMismatch beschreiben, ob und warum das Element gegen Validierungsregeln verstößt. Das Objekt ist „live“: Es gibt immer den aktuellen Zustand des Elements wieder.
Ein <output>-Element hat allerdings eine Besonderheit: Es ist kein Kandidat für die Formularvalidierung (willValidate ist immer false). Es besitzt weder required noch pattern oder min/max. Deshalb bleiben fast alle Flags von ValidityState dauerhaft false. Nur customError lässt sich über setCustomValidity() gezielt setzen. Dann wird auch valid zu false.
Nützlich ist validity vor allem, wenn ein Skript alle Formularelemente gleich behandelt, etwa beim Durchlaufen von form.elements, oder wenn ein berechnetes Ergebnis in einem <output> als fachlich ungültig markiert werden soll, z. B. „Summe überschreitet Budget“. Das Absenden des Formulars wird dadurch aber nicht verhindert.
Rückgabewert
ValidityState-Objekt. Bei <output> ist in der Praxis nur customError (und daraus folgend valid) veränderlich.Beispiele
Gültigkeitszustand eines output-Elements auslesen
// HTML: <output id="ergebnis">42</output>
const ausgabe = document.getElementById('ergebnis');
const { valid, customError, valueMissing } = ausgabe.validity;
console.log(valid, customError, valueMissing);
console.log(ausgabe.willValidate);Berechnetes Ergebnis per setCustomValidity als ungültig markieren
// HTML:
// <form id="bestellung" oninput="">
// <input type="number" id="menge" value="1"> ×
// <input type="number" id="preis" value="30"> =
// <output id="summe" for="menge preis"></output>
// </form>
const BUDGET = 100;
const form = document.getElementById('bestellung');
const summe = document.getElementById('summe');
const aktualisieren = () => {
const menge = Number(form.menge.value);
const preis = Number(form.preis.value);
const gesamt = menge * preis;
summe.value = gesamt.toFixed(2);
summe.setCustomValidity(gesamt > BUDGET ? 'Budget überschritten' : '');
summe.classList.toggle('fehler', !summe.validity.valid);
console.log(gesamt, summe.validity.customError, summe.validationMessage);
};
form.addEventListener('input', aktualisieren);
aktualisieren();Alle Formularelemente einheitlich prüfen
const form = document.querySelector('form');
const ungueltige = [...form.elements]
.filter((el) => 'validity' in el && !el.validity.valid)
.map((el) => `${el.tagName.toLowerCase()}#${el.id}`);
console.log('Ungültig:', ungueltige);
// checkValidity() ignoriert <output>, weil es kein Validierungskandidat ist
console.log('Formular gültig laut Browser:', form.checkValidity());// Wichtig · Fallstricke
- Kein Validierungskandidat:
<output>hat immerwillValidate === false. Auch wennvalidity.validnachsetCustomValidity()falseist, lieferncheckValidity()undreportValidity()true. Das Formular wird trotzdem abgesendet, und der Browser zeigt keine Fehlerblase an. - Die CSS-Pseudoklassen
:invalidund:validgreifen bei<output>in der Regel nicht. Um ungültige Werte hervorzuheben, eine eigene Klasse setzen, wie im Beispiel. - Die Eigenschaft ist schreibgeschützt.
output.validity = …hat keine Wirkung (im Strict Mode wird einTypeErrorgeworfen). Den Zustand ändert man nur übersetCustomValidity(). Mit einem leeren String wird der Fehler wieder entfernt. - Kompatibilität: Wird von allen modernen Browsern (Chrome, Edge, Firefox, Safari) seit Langem unterstützt. Der Internet Explorer kennt
<output>nicht.