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 badInput-Eigenschaft der ValidityState-Schnittstelle zeigt an, ob der Benutzer eine Eingabe gemacht hat, die der Browser nicht konvertieren kann. Zum Beispiel, wenn Sie ein Zahleneingabefeld haben, dessen Inhalt eine Zeichenkette ist.
Wert
Ein boolescher Wert, der true ist, wenn das ValidityState-Objekt nicht dem erwarteten Typ entspricht.
Beispiele
Erkennung von fehlerhaften Eingaben
Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabefelds.
Wenn der Benutzer Text anstelle einer Zahl eingibt, schlägt die Einschränkungsvalidierung fehl, und die Stile, die mit input:invalid übereinstimmen, werden angewendet.
Das <pre>-Element über dem Eingabefeld zeigt die Validierungsnachricht an, wenn die badInput-Eigenschaft des Elements zu true ausgewertet wird:
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
- ValidityState valid, customError-Eigenschaften.
- Leitfaden: Einschränkungsvalidierung
- Anleitung: Formular-Datenvalidierung