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

Wert

Ein boolescher Wert, der true ist, wenn der ValidityState nicht den Bedingungen entspricht.

Beispiele

Eingabe mit zu kurzem Zeichenfolgenwert

Das folgende Beispiel überprüft die Gültigkeit eines Text-Eingabeelements. Ein Zwang wurde mit dem minlength Attribut hinzugefügt, sodass die Eingabe eine Zeichenkette mit mindestens 4 Zeichen erwartet. Wenn der Benutzer eine zu kurze Zeichenkette eingibt, schlägt die Validierung der Bedingung 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