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 gibt 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-Einheitenlänge.

Wert

Ein boolescher Wert, der true ist, wenn der ValidityState nicht den Beschränkungen entspricht.

Beispiele

Eingabe mit zu kurzem Zeichenfolgenwert

Im folgenden Beispiel wird die Gültigkeit eines Text-Eingabeelements überprüft. Eine Einschränkung wurde 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 Beschränkungsprüfung des Elements fehl und die Stile, die der :invalid CSS-Pseudoklasse entsprechen, 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 # dom-validitystate-tooshort-dev

Browser-Kompatibilität

BCD tables only load in the browser