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 gibt an, ob der Benutzer eine Eingabe gemacht hat, die der Browser nicht konvertieren kann. Zum Beispiel, wenn Sie ein Zahleneingabefeld haben, dessen Inhalt ein String ist.

Wert

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

Beispiele

Erkennen von fehlerhafter Eingabe

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Wenn der Benutzer statt einer Zahl einen Text eingibt, schlägt die Überprüfung der Eingabebedingung fehl, und die Stile, die auf input:invalid zutreffen, werden angewendet. Das <pre>-Element oberhalb der Eingabe zeigt die Validierungsmeldung an, wenn die Eigenschaft badInput den Wert true hat:

css

input:invalid {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<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: Formulardatenvalidierung