ValidityState: tooLong-Eigenschaft

Ein Boolescher Wert, 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, so dass das textarea maximal 10 Zeichen erwartet. Wenn zu viele Zeichen im textarea vorhanden sind (wie unten der Fall), schlägt die Beschränkungsvalidierung des Elements fehl, und die Stile, die zur :invalid CSS-Pseudoklasse passen, werden angewendet.

Beim Bearbeiten des textarea erlaubt der Browser nicht, dass der Benutzer Zeichen hinzufügt, die die Beschränkungsvalidierung der maximalen Zeichenanzahl verfehlen würden, sodass anfangs nur das Löschen von Zeichen erlaubt ist. Neue Zeilenzeichen werden normalisiert und zählen als ein einzelnes Zeichen in der Berechnung der maximalen Länge.

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…");
  }
});

• Beschränkungsvalidierung
• Formulare: Datenformular-Validierung