Signatur
Beschreibung
Die Methode reportValidity() gehört zur Constraint Validation API und ist auf allen formularbezogenen Elementen vorhanden, also auch auf HTMLObjectElement. Sie führt dieselben Prüfschritte aus wie checkValidity(): Ist das Element ungültig, wird ein abbrechbares invalid-Ereignis ausgelöst und – falls dieses nicht abgebrochen wird – dem Benutzer eine Fehlermeldung angezeigt.
Wichtig: Laut HTML-Spezifikation sind <object>-Elemente von der Constraint-Validierung ausgeschlossen („barred from constraint validation“). Deshalb ist willValidate stets false, validationMessage ist ein leerer String, und reportValidity() gibt immer true zurück – auch nach einem Aufruf von setCustomValidity(). Ein invalid-Ereignis wird nie ausgelöst.
Die Methode existiert vor allem aus Gründen der Einheitlichkeit: Code, der generisch über form.elements iteriert und auf jedem Element reportValidity() aufruft, funktioniert so ohne Sonderfälle. Wenn Sie echte Validierung für eingebettete Inhalte brauchen, müssen Sie diese selbst in JavaScript umsetzen oder ein verstecktes <input> als Stellvertreter validieren.
Rückgabewert
true, wenn das Element gültig ist, sonst false. Da <object> von der Validierung ausgeschlossen ist, ist der Rückgabewert in der Praxis immer true.Beispiele
Einfacher Aufruf auf einem <object>-Element
// HTML: <form><object id="pdf" data="handbuch.pdf" type="application/pdf"></object></form>
const obj = document.getElementById('pdf');
console.log(obj.willValidate); // Nimmt das Element an der Validierung teil?
console.log(obj.reportValidity()); // Gültig?setCustomValidity() hat keine Wirkung
const obj = document.createElement('object');
document.body.append(obj);
obj.addEventListener('invalid', () => console.log('invalid ausgelöst'));
obj.setCustomValidity('Bitte zuerst das Dokument laden.');
console.log(JSON.stringify(obj.validationMessage));
console.log(obj.reportValidity());Generische Formularprüfung über form.elements
// Alle Formularelemente prüfen – <object> wird ohne Sonderbehandlung mitgeprüft
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
const invalid = [...form.elements].filter((el) => !el.reportValidity());
if (invalid.length > 0) {
event.preventDefault();
console.log(`Ungültige Felder: ${invalid.map((el) => el.name || el.tagName).join(', ')}`);
}
});Eigene Prüfung für eingebettete Inhalte
// Da reportValidity() bei <object> nichts meldet, eigene Logik ergänzen
const obj = document.querySelector('object');
const hint = document.querySelector('#pdf-hinweis'); // verstecktes <input required>
const isLoaded = () => obj.contentDocument !== null || obj.data !== '';
hint.setCustomValidity(isLoaded() ? '' : 'Das eingebettete Dokument fehlt.');
console.log(obj.reportValidity() && hint.reportValidity());// Wichtig · Fallstricke
- Immer
true:<object>ist von der Constraint-Validierung ausgeschlossen. Verlassen Sie sich für eingebettete Inhalte nicht aufreportValidity(),setCustomValidity()oder dasinvalid-Ereignis. - Bei anderen Elementen zeigt
reportValidity()sichtbar eine Browser-Meldung an und kann den Fokus verschieben. Das ist ein Unterschied zucheckValidity(), das still prüft. - Ältere Browser (z. B. Internet Explorer) kennen
reportValidity()nicht. Bei Bedarf pertypeof el.reportValidity === 'function'prüfen und notfalls aufcheckValidity()ausweichen. - Das Aussehen und der Text der Browser-Fehlermeldung sind nicht einheitlich und lassen sich nicht per CSS gestalten.