Signatur
Beschreibung
Die schreibgeschützte Eigenschaft validationMessage gibt einen String mit der Meldung zurück, die der Browser bei einer fehlgeschlagenen Prüfung des <select>-Elements anzeigen würde. Sie gehört zur Constraint Validation API. Bei einem Auswahlfeld ist der häufigste Fall das Attribut required, wenn keine gültige Option gewählt ist oder nur ein Platzhalter mit leerem value. Der zweite Fall ist ein eigener Fehler, den man mit setCustomValidity() gesetzt hat.
Ist das Element gültig oder nimmt es gar nicht an der Validierung teil (zum Beispiel bei disabled), ist der Wert ein leerer String. Die Standardmeldung stellt der Browser in der Sprache seiner Oberfläche bereit, etwa „Wählen Sie ein Element in der Liste aus.“ Eine mit setCustomValidity() gesetzte Meldung wird genau so zurückgegeben, wie man sie übergeben hat.
In der Praxis nutzt man validationMessage, um Fehlermeldungen selbst darzustellen, etwa in einem eigenen Fehler-Element neben dem Feld statt in der Sprechblase des Browsers. Das kombiniert man meist mit dem Ereignis invalid, mit checkValidity() oder mit dem Attribut novalidate am Formular.
Rückgabewert
Beispiele
Meldung eines Pflicht-Auswahlfelds auslesen
// HTML: <select id="land" required>
// <option value="">Bitte wählen …</option>
// <option value="de">Deutschland</option>
// </select>
const select = document.getElementById('land');
console.log(select.validity.valueMissing); // true
console.log(select.validationMessage);
select.value = 'de';
console.log(JSON.stringify(select.validationMessage));Eigene Fehleranzeige statt Browser-Sprechblase
// HTML: <form id="bestellung" novalidate>
// <select id="groesse" name="groesse" required>
// <option value="">Größe wählen</option>
// <option>S</option><option>M</option><option>L</option>
// </select>
// <span id="groesse-fehler" aria-live="polite"></span>
// <button>Bestellen</button>
// </form>
const form = document.getElementById('bestellung');
const select = document.getElementById('groesse');
const fehler = document.getElementById('groesse-fehler');
const zeigeFehler = () => {
fehler.textContent = select.validationMessage; // leer, wenn gültig
};
select.addEventListener('change', zeigeFehler);
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
zeigeFehler();
}
});Eigene Regel mit setCustomValidity()
const zahlung = document.querySelector('#zahlung'); // <select>
const land = document.querySelector('#land'); // <select>
const pruefe = () => {
if (zahlung.value === 'rechnung' && land.value !== 'de') {
zahlung.setCustomValidity('Kauf auf Rechnung ist nur in Deutschland möglich.');
} else {
zahlung.setCustomValidity(''); // Fehler zurücksetzen
}
console.log(zahlung.validationMessage || '(gültig)');
};
zahlung.addEventListener('change', pruefe);
land.addEventListener('change', pruefe);// Wichtig · Fallstricke
- Nur lesbar: Eine Zuweisung an
validationMessagewird still ignoriert, im Strict Mode wirft sie einenTypeError. Eigene Meldungen setzt man ausschließlich übersetCustomValidity(). - Fehler zurücksetzen: Eine mit
setCustomValidity()gesetzte Meldung bleibt stehen, bis mansetCustomValidity('')aufruft. Bis dahin gilt das Feld als ungültig, und das Formular lässt sich nicht absenden. - Text vom Browser abhängig: Die Standardmeldungen unterscheiden sich je nach Browser und Sprache der Oberfläche. Deshalb nie auf einen bestimmten Wortlaut prüfen. Für Programmlogik nutzt man
validity, etwavalidity.valueMissing. - Platzhalter-Option:
requiredgreift bei einem einfachen<select>nur, wenn die erste Option einen leerenvaluehat und nicht in einer<optgroup>steht. Sonst gilt diese erste Option als gültige Auswahl. - Deaktivierte Elemente (
disabled) und Elemente innerhalb eines deaktivierten<fieldset>werden nicht validiert. Die Eigenschaft ist dann immer leer. - Barrierefreiheit: Eigene Fehleranzeigen sollte man mit
aria-liveoderaria-describedbymit dem Feld verknüpfen, damit Screenreader die Meldung vorlesen. - Browser: Die Eigenschaft wird von allen aktuellen Browsern unterstützt.