ValidityState: badInput-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Dezember 2018.
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
| Specification |
|---|
| HTML # dom-validitystate-badinput-dev |
Browser-Kompatibilität
Siehe auch
- ValidityState valid, customError-Eigenschaften.
- Leitfaden: Einschränkungsvalidierung
- Anleitung: Formular-Datenvalidierung