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 December 2018.

Die schreibgeschützte badInput Eigenschaft des ValidityState Interfaces zeigt an, ob der Benutzer eine Eingabe gemacht hat, die der Browser nicht umwandeln kann. Zum Beispiel, wenn Sie ein Zahleneingabe-Element haben, dessen Inhalt ein String ist.

Wert

Ein boolean, der true ist, wenn das ValidityState Objekt nicht dem erwarteten Typ entspricht.

Beispiele

Erkennung von fehlerhafter Eingabe

Das folgende Beispiel überprüft die Gültigkeit eines zahleneingabe Elements. Wenn der Benutzer Text anstelle einer Zahl eingibt, schlägt die Erfüllung der Eingabekriterien fehl, und die dem input:invalid entsprechenden Stile werden angewendet. Das <pre> Element über der Eingabe zeigt die Validierungsnachricht an, wenn die Eigenschaft badInput auf true ausgewertet wird:

css
input:invalid {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" />
js
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 Standard
# dom-validitystate-badinput-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch