ValidityState: tooShort-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 tooShort-Eigenschaft der ValidityState-Schnittstelle zeigt an, ob der Wert eines <input>, <button>, <select>, <output>, <fieldset> oder <textarea>, nachdem er vom Benutzer bearbeitet wurde, kürzer ist als die durch das minlength-Attribut des Elements festgelegte minimale Code-Element-Länge.

Wert

Ein Boolean, der true ist, wenn der ValidityState den Einschränkungen nicht entspricht.

Beispiele

Eingabefeld mit zu kurzem Zeichenfolgenwert

Das folgende Beispiel überprüft die Gültigkeit eines Texteingabeelements. Es wurde eine Einschränkung mit dem minlength-Attribut hinzugefügt, sodass die Eingabe eine Zeichenfolge mit mindestens 4 Zeichen erwartet. Wenn der Benutzer eine zu kurze Zeichenfolge eingibt, schlägt die Einschränkungsvalidierung des Elements fehl, und die dem CSS-Pseudoklasse :invalid entsprechenden Stile werden angewendet.

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="text" id="userText" minlength="4" />

const userInput = document.getElementById("userText");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooShort) {
    log("Not enough characters entered.");
  } else {
    log("Input is valid…");
  }
});

Spezifikationen

Specification
HTML Standard # dom-validitystate-tooshort-dev

Browser-Kompatibilität

BCD tables only load in the browser