Die schreibgeschütztebadInput-Eigenschaft derValidityState-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, dertrue ist, wenn dasValidityState-Objekt nicht dem erwarteten Typ entspricht.

Beispiele

Erkennung von fehlerhaften Eingaben

Das folgende Beispiel überprüft die Gültigkeit einesnumerischen Eingabefelds.Wenn der Benutzer Text anstelle einer Zahl eingibt, schlägt die Einschränkungsvalidierung fehl, und die Stile, die mitinput:invalid übereinstimmen, werden angewendet.Das<pre>-Element über dem Eingabefeld zeigt die Validierungsnachricht an, wenn diebadInput-Eigenschaft des Elements zutrue ausgewertet wird:

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

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

<pre>Validation logged here...</pre><input type="number" />

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

Browser-Kompatibilität

Siehe auch

• ValidityStatevalid,customError-Eigenschaften.
• Leitfaden: Einschränkungsvalidierung
• Anleitung: Formular-Datenvalidierung