ValidityState: Eigenschaft badInput

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 der ValidityState-Schnittstelle gibt an, ob der Benutzer eine Eingabe gemacht hat, die der Browser nicht umwandeln kann. Zum Beispiel, wenn Sie ein number-Input-Element haben, dessen Inhalt eine Zeichenkette ist.

Wert

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

Beispiele

Erkennung fehlerhafter Eingaben

Im folgenden Beispiel wird die Gültigkeit eines nummerischen Eingabeelements überprüft. Wenn der Benutzer anstelle einer Zahl Text eingibt, schlägt die Validierung der Einschränkungen des Elements fehl, und die Styles, die auf input:invalid zutreffen, werden angewendet. Das <pre>-Element oberhalb der Eingabe zeigt die Validierungsnachricht an, wenn die Eigenschaft badInput des Elements auf true ausgewertet wird:

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: Validierung von Einschränkungen
Anleitung: Formular-Datenvalidierung