Signatur
Beschreibung
Die schreibgeschützte Eigenschaft validationMessage enthält den Text, den der Browser bei einer fehlgeschlagenen Formularprüfung an einem <button> anzeigen würde. Ist der Button gültig oder nimmt er gar nicht an der Validierung teil, ist der Wert ein leerer String ("").
Ein Button hat keinen eigenen Wert, der geprüft werden könnte, wie etwa required oder pattern bei Eingabefeldern. Deshalb kann ein Button in der Praxis nur durch einen eigenen Fehler ungültig werden, den man mit setCustomValidity() setzt. validationMessage gibt dann genau diesen Text zurück, und validity.customError ist true.
Wichtig: Nur Absende-Buttons (type="submit", das ist der Standard) nehmen an der Validierung teil. Buttons mit type="button" oder type="reset", deaktivierte Buttons und Buttons innerhalb eines <datalist> werden übersprungen (willValidate === false). Bei ihnen ist validationMessage immer leer, auch wenn vorher setCustomValidity() aufgerufen wurde.
Sinnvoll ist die Eigenschaft vor allem für eigene Fehleranzeigen: Man liest die Meldung aus und zeigt sie in einem eigenen Element an, statt die Sprechblase des Browsers zu verwenden.
Rückgabewert
willValidate === false).Beispiele
Eigenen Fehler setzen und auslesen
// HTML: <form><button id="send">Absenden</button></form>
const button = document.querySelector('#send');
console.log(JSON.stringify(button.validationMessage));
button.setCustomValidity('Bitte zuerst die AGB akzeptieren.');
console.log(button.validationMessage);
console.log(button.validity.customError);
// Fehler wieder entfernen
button.setCustomValidity('');
console.log(JSON.stringify(button.validationMessage));Buttons, die nicht validiert werden, liefern immer einen leeren String
const btn = document.createElement('button');
btn.type = 'button';
btn.setCustomValidity('Wird ignoriert');
console.log(btn.willValidate);
console.log(JSON.stringify(btn.validationMessage));
// Wieder zum Absende-Button machen: jetzt zählt der Fehler
btn.type = 'submit';
console.log(btn.willValidate, btn.validationMessage);Absenden sperren, bis eine Checkbox angehakt ist, mit eigener Fehleranzeige
// HTML:
// <form id="order" novalidate>
// <label><input type="checkbox" id="agb"> AGB gelesen</label>
// <button id="buy">Kaufen</button>
// <p id="error" role="alert"></p>
// </form>
const form = document.querySelector('#order');
const agb = document.querySelector('#agb');
const buy = document.querySelector('#buy');
const error = document.querySelector('#error');
const updateValidity = () => {
buy.setCustomValidity(agb.checked ? '' : 'Bitte die AGB bestätigen.');
};
agb.addEventListener('change', updateValidity);
updateValidity();
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
error.textContent = buy.validationMessage;
} else {
error.textContent = '';
}
});// Wichtig · Fallstricke
- Nur lesbar: Eine Zuweisung an
validationMessagewird still ignoriert (im Strict Mode gibt es einenTypeError). Die Meldung setzt man mitsetCustomValidity(). - Der Fehler bleibt bestehen: Ein mit
setCustomValidity()gesetzter Fehler bleibt aktiv, bis mansetCustomValidity('')aufruft. Wer das vergisst, kann das Formular nicht mehr absenden. - Leerer String heißt nicht zwingend „gültig“: Der Wert ist auch dann leer, wenn der Button gar nicht validiert wird (
type="button"/"reset",disabled, innerhalb von<datalist>). Für eine eindeutige PrüfungwillValidateundvalidity.validverwenden. - Ein ungültiger Button sperrt das ganze Formular: Ein ungültiger Absende-Button macht das Formular ungültig. Das blockiert auch das Absenden über andere Buttons oder die Enter-Taste, solange nicht
novalidateoderformnovalidategesetzt ist. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Das Aussehen der eingebauten Fehler-Sprechblase unterscheidet sich je nach Browser. Für eine einheitliche Darstellung liest man die Meldung aus und zeigt sie selbst an.
- Sicherheit: Die Meldung per
textContenteinfügen, nicht perinnerHTML, vor allem wenn sie Benutzereingaben enthält.