ValidityState: badInput-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft badInput der Schnittstelle ValidityState gibt an, ob der Benutzer eine Eingabe gemacht hat, die der Browser nicht konvertieren kann. Das ist beispielsweise der Fall, wenn der Inhalt eines Eingabeelements für Zahlen eine Zeichenfolge ist.
Wert
Ein boolescher Wert, der true ist, wenn die Eingabe nicht dem erwarteten Typ entspricht.
Beispiele
Ungültige Eingabe erkennen
Das folgende Beispiel prüft die Gültigkeit eines Eingabeelements für Zahlen.
Wenn der Benutzer Text statt einer Zahl eingibt, besteht das Element die Constraint-Validierung nicht, und die Formatierungen für input:invalid werden angewendet.
Das <pre>-Element oberhalb des Eingabefelds zeigt die Validierungsmeldung an, wenn badInput für das Element true ergibt:
input:invalid {
outline: red solid 3px;
}
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" />
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.badInput) {
log(`Bad input detected: ${userInput.validationMessage}`);
}
});
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-validitystate-badinput-dev |
Browser-Kompatibilität
Siehe auch
- Die ValidityState-Eigenschaften valid und customError.
- Leitfaden: Constraint-Validierung
- Tutorial: Validierung von Formulardaten