ValidityState: tooLong-Eigenschaft

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

Das folgende Beispiel überprüft die Gültigkeit eines Textarea-Elements. Eine Einschränkung wurde mit dem maxlength-Attribut hinzugefügt, sodass die Textarea maximal 10 Zeichen erwartet. Wenn sich zu viele Zeichen in der Textarea befinden (was unten der Fall ist), schlägt die Einschränkungsgültigkeitsprüfung des Elements fehl und die Stile, die :invalid-CSS-Pseudoklasse entsprechen, werden angewendet.

Beim Bearbeiten der Textarea erlaubt der Browser dem Benutzer nicht, Zeichen hinzuzufügen, die die Einschränkungsgültigkeitsprüfung der maximalen Zeichenanzahl nicht bestehen würden, sodass zunächst nur das Löschen von Zeichen erlaubt ist. Zeilenumbruchzeichen werden normalisiert und zählen bei der Berechnung der maximalen Länge als ein einziges Zeichen.

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

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

<pre id="log">Validation logged here...</pre>
<textarea name="story" id="userText" maxlength="10" rows="5">
It was a dark and


stormy night...
</textarea>

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooLong) {
    log("Too many characters in the textarea.");
  } else {
    log("Input is valid…");
  }
});

• Einschränkungsvalidierung
• Formulare: Datenformularvalidierung