Signatur
Beschreibung
Die Eigenschaft validity liefert ein ValidityState-Objekt mit booleschen Eigenschaften wie valid, customError, valueMissing oder patternMismatch. Das Objekt ist live: Es liefert bei jedem Zugriff den aktuellen Zustand und ist immer dieselbe Instanz, sodass man sich eine Referenz merken kann.
Anders als bei <input> hat ein <button> keine Attribute wie required, pattern oder min. Praktisch relevant ist daher fast nur customError, das über setCustomValidity() gesetzt wird. Alle anderen Fehlerflags sind bei Buttons immer false.
Wichtig: Nur Buttons mit type="submit" (der Standardwert) nehmen an der Constraint-Validierung teil. Buttons mit type="button" oder type="reset" sowie deaktivierte Buttons sind von der Validierung ausgeschlossen. Bei ihnen ist willValidate gleich false, und sie blockieren das Absenden des Formulars nie, selbst wenn ein eigener Fehler gesetzt ist.
Typischer Einsatz: Ein Submit-Button wird über setCustomValidity() als ungültig markiert, etwa solange eine Bedingung außerhalb der Formularfelder nicht erfüllt ist. Mit validity.valid oder validity.customError fragt man diesen Zustand gezielt ab.
Rückgabewert
ValidityState-Objekt mit den Flags valid, customError, valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch und badInput. Bei Buttons ist in der Praxis nur customError veränderlich.Beispiele
Gültigkeitszustand eines Submit-Buttons auslesen
const button = document.createElement('button'); // type="submit" ist Standard
document.body.append(button);
console.log(button.validity.valid); // Standardzustand
console.log(button.validity.customError);
button.setCustomValidity('Bitte zuerst die AGB akzeptieren.');
console.log(button.validity.valid);
console.log(button.validity.customError);
console.log(button.validationMessage);Absenden sperren, bis eine externe Bedingung erfüllt ist
// HTML: <form id="order"><input type="checkbox" id="agb"><button id="send">Bestellen</button></form>
const form = document.querySelector('#order');
const agb = document.querySelector('#agb');
const send = document.querySelector('#send');
const update = () => {
send.setCustomValidity(agb.checked ? '' : 'Bitte die AGB bestätigen.');
};
agb.addEventListener('change', update);
update();
form.addEventListener('submit', (event) => {
if (!send.validity.valid) {
event.preventDefault();
send.reportValidity(); // zeigt die Meldung an
}
});type="button" ist von der Validierung ausgeschlossen
const btn = document.createElement('button');
btn.type = 'button';
btn.setCustomValidity('Fehler');
console.log(btn.willValidate); // nimmt nicht teil
console.log(btn.validity.customError); // Flag ist trotzdem gesetzt
console.log(btn.checkValidity()); // aber keine Validierung// Wichtig · Fallstricke
- Nur Submit-Buttons zählen: Bei
type="button",type="reset"und deaktivierten Buttons (disabled) istwillValidategleichfalse. Ein gesetztercustomErrorblockiert das Formular dann nicht, undcheckValidity()lieferttrue. - Fehler zurücksetzen: Ein eigener Fehler bleibt bestehen, bis
setCustomValidity('')mit einem leeren String aufgerufen wird. Wird das vergessen, lässt sich das Formular dauerhaft nicht absenden. - Schreibgeschützt: Eine Zuweisung an
validityoder an dessen Flags wird ignoriert (im Strict Mode gibt es einenTypeErrorbei den Flags). Den Zustand ändert man nur übersetCustomValidity(). novalidate: Hat das Formularnovalidateoder der Buttonformnovalidate, wird beim Absenden nicht validiert.validityzeigt den Zustand aber weiterhin korrekt an.- Wird von allen modernen Browsern unterstützt (Baseline).