Signatur
Beschreibung
Die Eigenschaft badInput des ValidityState-Objekts (erreichbar über element.validity) gibt an, ob der Benutzer etwas eingegeben hat, das der Browser nicht in den Datentyp des Feldes umwandeln kann. Typisches Beispiel: In einem <input type="number"> steht der Text "12abc" oder nur "e".
Wichtig: In so einem Fall gibt input.value einen leeren String zurück. Ohne badInput kann man also nicht unterscheiden, ob das Feld wirklich leer ist oder ob Unsinn drinsteht. Genau hier hilft die Eigenschaft, z. B. um eine passende Fehlermeldung wie „Bitte eine gültige Zahl eingeben“ statt „Feld ist leer“ anzuzeigen.
Ist badInput true, ist auch validity.valid false, das Feld passt auf die CSS-Pseudoklasse :invalid, und ein normaler Formularversand wird blockiert. Die Eigenschaft ist schreibgeschützt. Setzen kann man sie nicht, auch nicht mit setCustomValidity() (das betrifft nur customError).
Relevant ist badInput vor allem bei Feldern, deren Eingabe der Browser erst parsen muss: number, date, time, datetime-local, month, week, email (bei manchen Browsern mit Punycode) und color. Bei text-Feldern ist der Wert immer false.
Rückgabewert
true, wenn der Browser die Eingabe nicht umwandeln kann, sonst false.Beispiele
Leeres Feld von ungültiger Eingabe unterscheiden
// HTML: <input type="number" id="alter" required>
const alter = document.querySelector('#alter');
alter.addEventListener('input', () => {
if (alter.validity.badInput) {
console.log('Ungültige Zahl – value ist:', JSON.stringify(alter.value));
} else if (alter.validity.valueMissing) {
console.log('Feld ist leer');
} else {
console.log('OK:', alter.valueAsNumber);
}
});Eigene Fehlermeldung vor dem Absenden
// HTML: <form id="f"><input type="number" name="menge" id="menge"><button>Senden</button></form>
const form = document.querySelector('#f');
const menge = document.querySelector('#menge');
const pruefen = () => {
menge.setCustomValidity('');
if (menge.validity.badInput) {
menge.setCustomValidity('Bitte nur Ziffern eingeben.');
}
};
menge.addEventListener('input', pruefen);
form.addEventListener('submit', (event) => {
pruefen();
if (!form.reportValidity()) event.preventDefault();
});Alle Felder mit ungültiger Eingabe finden
const findeBadInput = (form) =>
[...form.elements]
.filter((el) => el.validity?.badInput)
.map((el) => el.name || el.id);
console.log(findeBadInput(document.forms[0]));// Wichtig · Fallstricke
- Leerer
value: BeibadInput === trueliefertinput.value""undvalueAsNumberNaN. Die ursprüngliche Eingabe kommt man per Skript nicht heran. - Unterschiede zwischen Browsern: Wie gut ungültige Eingaben überhaupt möglich sind, hängt vom Browser ab. Manche Browser verhindern bei
type="number"das Eintippen von Buchstaben ganz, andere erlauben es. Firefox erlaubt beliebigen Text und meldet dannbadInput. Bei Datumsfeldern mit eigenem Auswahl-Widget trittbadInputmeist nur bei unvollständiger Eingabe auf (z. B. fehlt das Jahr). - Nur lesbar: Eine Zuweisung wie
validity.badInput = falsehat keine Wirkung. Um den Zustand zu beheben, muss manvalueneu setzen (z. B.input.value = ''). novalidate: Auch bei<form novalidate>wirdbadInputweiter berechnet. Nur die automatische Blockierung und die Fehlermeldung des Browsers entfallen.- Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Eigenschaft nicht.