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

Wert

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

Beispiele

Erkennen von fehlerhaften Eingaben

Das folgende Beispiel überprüft die Validität eines numerischen Eingabeelements. Wenn der Benutzer Text anstelle einer Zahl eingibt, schlägt die Eingabeelemente-Beschränkungsvalidierung fehl, und die Stile, die zu input:invalid passen, werden angewendet. Das <pre>-Element über dem Eingabefeld zeigt die Validierungsnachricht an, wenn das Element badInput auf true gesetzt ist:

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 Standard # dom-validitystate-badinput-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

ValidityState valid, customError Eigenschaften.
Leitfaden: Eingabebeschränkungsvalidierung
Anleitung: Validierung von Formulardaten