HTMLOutputElement.checkValidity() — Methode · JavaScript-Referenz

Signatur

HTMLOutputElement.prototype.checkValidity()

Beschreibung

Die Methode checkValidity() gehört zur Constraint Validation API, die alle Formularelemente gemeinsam haben. Bei <input>, <select> oder <textarea> prüft sie, ob der aktuelle Wert alle Einschränkungen erfüllt (required, pattern, min/max usw.). Ist das nicht so, löst sie das Ereignis invalid aus und gibt false zurück.

Ein <output>-Element zeigt nur ein Ergebnis an, etwa aus einer Berechnung. Der Nutzer gibt dort nichts ein. Die HTML-Spezifikation nimmt <output> deshalb ausdrücklich von der Einschränkungsvalidierung aus: willValidate ist immer false, und checkValidity() gibt immer true zurück. Es wird nie ein invalid-Ereignis ausgelöst.

Die Methode gibt es vor allem, damit alle Formularelemente dieselbe Schnittstelle haben. So kannst du über form.elements laufen und bei jedem Element checkValidity() aufrufen, ohne vorher den Elementtyp zu prüfen. Für eine echte Prüfung eines berechneten Ergebnisses ist die Methode nicht geeignet. Dafür prüfst du die Eingabefelder, aus denen das Ergebnis entsteht.

Rückgabewert

Typ

boolean

Beschreibung

Immer true, weil <output>-Elemente nie an der Einschränkungsvalidierung teilnehmen.

Beispiele

Einfacher Aufruf auf einem output-Element

// HTML: <output id="summe">0</output>
const summe = document.querySelector('#summe');

console.log(summe.checkValidity());
console.log(summe.willValidate);

true false

setCustomValidity() ändert das Ergebnis nicht

const out = document.createElement('output');
out.value = '-5';

// Eigene Fehlermeldung setzen – wirkt sich bei <output> nicht aus
out.setCustomValidity('Negative Summen sind nicht erlaubt');

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

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

true ""

Formular prüfen: output wird übersprungen

// HTML:
// <form id="rechner">
//   <input name="a" type="number" required>
//   <input name="b" type="number" required>
//   <output name="ergebnis" for="a b"></output>
// </form>
const form = document.querySelector('#rechner');

const ungueltig = [...form.elements]
  .filter((el) => typeof el.checkValidity === 'function')
  .filter((el) => !el.checkValidity())
  .map((el) => el.name);

// Nur die leeren Pflichtfelder erscheinen – 'ergebnis' nie
console.log(ungueltig);

["a", "b"]

Berechnetes Ergebnis selbst prüfen

const form = document.querySelector('#rechner');
const { a, b, ergebnis } = form.elements;

form.addEventListener('input', () => {
  const wert = a.valueAsNumber + b.valueAsNumber;
  ergebnis.value = Number.isNaN(wert) ? '' : String(wert);

  // Prüfung am Eingabefeld statt am <output>
  b.setCustomValidity(wert < 0 ? 'Die Summe darf nicht negativ sein' : '');
  console.log('Formular gültig:', form.checkValidity());
});

Formular gültig: true // bzw. false bei negativer Summe

// Wichtig · Fallstricke

Keine echte Prüfung: Das Ergebnis ist immer true. Wenn du einen berechneten Wert kontrollieren willst, rufe setCustomValidity() auf einem Eingabefeld auf, nicht auf dem <output>.
setCustomValidity() auf einem <output> ändert nichts an checkValidity(), reportValidity() oder form.checkValidity(). validationMessage bleibt leer, weil willValidate false ist. Einige Einträge in validity (z. B. customError) können trotzdem gesetzt sein.
Auch :invalid/:valid-CSS-Selektoren gelten für <output> nicht, weil das Element nie an der Validierung teilnimmt.
<output> wird nicht mit dem Formular übermittelt (FormData enthält es nicht). Wird das Ergebnis auf dem Server gebraucht, übergib es zusätzlich in einem <input type="hidden">.
Kompatibilität: wird von allen modernen Browsern unterstützt. Der alte Internet Explorer kannte <output> nicht.

Siehe auch

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