Signatur
Beschreibung
Die Eigenschaft validity von HTMLObjectElement liefert ein ValidityState-Objekt. Es zeigt über boolesche Flags wie valid, customError oder valueMissing, ob das Element Gültigkeitsregeln verletzt. Die Eigenschaft gehört zur Constraint Validation API, die alle formularbezogenen Elemente gemeinsam haben.
Ein <object>-Element ist zwar ein formularbezogenes Element (es taucht in form.elements auf und hat ein form-Attribut). Nach der HTML-Spezifikation ist es aber von der Formularvalidierung ausgeschlossen. Deshalb ist willValidate immer false, und checkValidity() bzw. reportValidity() geben immer true zurück. Das Element blockiert also nie das Absenden eines Formulars.
Wirklich nützlich ist validity hier vor allem in generischem Code, der über alle Formularelemente läuft, zum Beispiel in eigenen Validierungsbibliotheken. Setzt man mit setCustomValidity() eine Fehlermeldung, dann wird validity.customError zu true und validity.valid zu false. Das Absenden des Formulars bleibt trotzdem möglich.
Das zurückgegebene Objekt ist „live“: Es zeigt immer den aktuellen Zustand. Es wird bei jedem Zugriff neu ausgewertet und muss nicht neu abgefragt werden.
Rückgabewert
ValidityState-Objekt mit den Flags valid, valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput und customError. Bei <object> kann praktisch nur customError auf true wechseln.Beispiele
Gültigkeitszustand eines object-Elements auslesen
// HTML: <form id="f"><object id="pdf" data="doku.pdf" type="application/pdf"></object></form>
const obj = document.getElementById('pdf');
console.log(obj.validity instanceof ValidityState);
console.log(obj.validity.valid);
console.log(obj.willValidate); // object wird nie validiertEigene Fehlermeldung setzen und customError prüfen
const obj = document.querySelector('object');
obj.setCustomValidity('Plugin-Inhalt konnte nicht geladen werden');
console.log(obj.validity.customError);
console.log(obj.validity.valid);
console.log(obj.validationMessage);
// Trotzdem kein Hindernis für das Formular:
console.log(obj.checkValidity());
// Fehler wieder zurücksetzen
obj.setCustomValidity('');
console.log(obj.validity.valid);Generische Prüfung aller Formularelemente
const describeValidity = (form) =>
[...form.elements].map((el) => ({
tag: el.tagName.toLowerCase(),
name: el.name || el.id,
willValidate: el.willValidate,
valid: el.validity.valid,
}));
const form = document.querySelector('form');
console.table(describeValidity(form));
// Nur Elemente berücksichtigen, die tatsächlich validiert werden
const invalid = [...form.elements].filter(
(el) => el.willValidate && !el.validity.valid
);
console.log(`${invalid.length} ungültige Felder`);// Wichtig · Fallstricke
- Von der Validierung ausgeschlossen:
<object>nimmt nie an der Formularvalidierung teil. Einvalidity.valid === false(etwa nachsetCustomValidity()) verhindert nicht das Absenden. Prüfe in generischem Code deshalb immer zuerstwillValidate. validationMessageist bei Elementen, die nicht validiert werden, laut Spezifikation eine leere Zeichenkette. Das gilt auch dann, wenn eine eigene Fehlermeldung gesetzt wurde.- Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie
obj.validity = …wird ignoriert bzw. löst im Strict Mode einenTypeErroraus. Den Zustand änderst du nur übersetCustomValidity(). - Die CSS-Pseudoklassen
:invalid/:validgreifen bei<object>nicht, weil das Element nicht validiert wird. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der alte Internet Explorer hatte nur teilweise Unterstützung.