HTMLOutputElement.reportValidity() — Methode · JavaScript-Referenz

Signatur

HTMLOutputElement.prototype.reportValidity()

Beschreibung

Die Methode reportValidity() gehört zur Constraint Validation API, also der eingebauten Formularprüfung. Sie läuft genauso ab wie checkValidity(): Ist ein Element ungültig, wird ein invalid-Ereignis ausgelöst. Wird dieses Ereignis nicht abgebrochen, zeigt der Browser dem Nutzer zusätzlich eine Fehlermeldung an, zum Beispiel als Sprechblase am Element.

Beim <output>-Element hat das aber praktisch keine Wirkung. <output> ist zwar ein formularbezogenes Element, gehört laut HTML-Spezifikation aber nicht zu den übermittelbaren Elementen. Deshalb wird es nie in die Formularprüfung einbezogen. willValidate ist immer false, und reportValidity() gibt immer true zurück. Das gilt auch dann, wenn vorher mit setCustomValidity() eine Fehlermeldung gesetzt wurde.

Die Methode gibt es vor allem, damit alle Formularelemente dieselbe Schnittstelle haben. So kann man z. B. über form.elements gehen und bei jedem Element reportValidity() aufrufen, ohne vorher den Typ zu prüfen. Wenn berechnete Ergebnisse geprüft werden müssen, prüft man besser die Eingabefelder, aus denen das Ergebnis entsteht.

Rückgabewert

Typ

boolean

Beschreibung

Bei <output>-Elementen immer true, weil sie nie in die Formularprüfung einbezogen werden. Allgemein bedeutet true „gültig“ und false „ungültig“.

Beispiele

Grundlegender Aufruf an einem Rechenergebnis

// HTML: <form id="calc"><input id="a" type="number" value="2"> + <input id="b" type="number" value="3"> = <output id="sum" for="a b"></output></form>
const a = document.getElementById('a');
const b = document.getElementById('b');
const sum = document.getElementById('sum');

sum.value = String(a.valueAsNumber + b.valueAsNumber);

console.log(sum.value);            // "5"
console.log(sum.willValidate);     // false
console.log(sum.reportValidity()); // true

5 false true

setCustomValidity() ändert das Ergebnis nicht

const out = document.createElement('output');
document.body.append(out);

out.addEventListener('invalid', () => console.log('invalid ausgelöst'));

out.setCustomValidity('Ergebnis außerhalb des erlaubten Bereichs');
console.log(out.validationMessage); // "" – keine Prüfung, daher keine Meldung
console.log(out.reportValidity());  // true – es wird kein invalid-Ereignis ausgelöst

true

Praxis: Eingabefelder statt Ergebnis prüfen

// HTML: <form id="order"><input id="qty" type="number" min="1" max="10" required> <output id="total" for="qty"></output> <button>Bestellen</button></form>
const form = document.getElementById('order');
const qty = document.getElementById('qty');
const total = document.getElementById('total');
const PREIS = 4.5;

qty.addEventListener('input', () => {
  total.value = qty.validity.valid
    ? `${(qty.valueAsNumber * PREIS).toFixed(2)} €`
    : '–';
});

form.addEventListener('submit', (event) => {
  // Alle Elemente durchgehen – output liefert immer true und blockiert nie
  const allValid = [...form.elements].every((el) => el.reportValidity());
  if (!allValid) event.preventDefault();
  console.log('Gültig:', allValid, '| output:', total.reportValidity());
});

Gültig: false | output: true (bei leerem oder ungültigem Mengenfeld)

// Wichtig · Fallstricke

Immer true: <output> wird nie in die Formularprüfung einbezogen. Daher gilt: kein invalid-Ereignis, keine Fehlermeldung im Browser, und validity.valid ist immer true. Ungültige berechnete Werte müssen Sie selbst anzeigen, z. B. mit Text, einer CSS-Klasse oder aria-live.
setCustomValidity() wirkt nicht: Die Methode lässt sich aufrufen, hat bei <output> aber keine Wirkung auf reportValidity(), checkValidity() oder das Absenden des Formulars.
Nicht mit checkValidity() verwechseln: Bei anderen Elementen zeigt reportValidity() dem Nutzer Fehler an und setzt oft den Fokus auf das Element. checkValidity() prüft nur, ohne etwas anzuzeigen.
Das Formular prüft <output> auch nicht: form.reportValidity() überspringt <output>-Elemente. Ihr Wert wird beim Absenden auch nicht mitgeschickt.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Der Internet Explorer kennt reportValidity() nicht.

Siehe auch

HTMLOutputElement.checkValidity() HTMLOutputElement.setCustomValidity() HTMLInputElement.reportValidity() HTMLButtonElement.reportValidity() HTMLObjectElement.reportValidity()