ValidityState.tooLong — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.tooLong

Beschreibung

Die Eigenschaft tooLong des ValidityState-Objekts (erreichbar über element.validity) zeigt an, ob ein <input> oder <textarea> gegen die Längenbeschränkung aus dem Attribut maxlength verstößt. Ist das der Fall, gilt das Element als ungültig: Es passt dann auf die CSS-Pseudoklasse :invalid, und checkValidity() gibt false zurück.

Wichtig: tooLong wird nur dann true, wenn der Wert durch den Nutzer geändert wurde (das sogenannte dirty value flag ist gesetzt). Werte, die per Skript über element.value = ... oder über das HTML-Attribut value gesetzt werden, lösen die Prüfung nicht aus. Da Browser außerdem die Eingabe über maxlength hinaus normalerweise gar nicht zulassen, tritt tooLong === true in der Praxis selten auf. Typisch ist der Fall, dass ein vorbelegter, zu langer Wert vom Nutzer bearbeitet wird, aber immer noch zu lang ist.

Die Länge wird in UTF-16-Codeeinheiten gemessen, nicht in sichtbaren Zeichen. Ein Emoji wie „😀“ zählt daher als 2. Die Eigenschaft gilt für die Eingabetypen text, search, url, tel, email und password sowie für <textarea>. Bei anderen Typen ist sie immer false.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der vom Nutzer bearbeitete Wert mehr UTF-16-Codeeinheiten enthält als maxlength erlaubt, sonst false.

Beispiele

Eigene Fehlermeldung bei zu langem Text

// HTML: <textarea id="bio" maxlength="10">Dieser Text ist viel zu lang</textarea>
const bio = document.querySelector('#bio');

bio.addEventListener('input', () => {
  if (bio.validity.tooLong) {
    bio.setCustomValidity(`Maximal ${bio.maxLength} Zeichen, aktuell ${bio.value.length}.`);
  } else {
    bio.setCustomValidity('');
  }
  bio.reportValidity();
});

// Nach dem Löschen eines Zeichens durch den Nutzer: // Hinweis "Maximal 10 Zeichen, aktuell 27." erscheint

Wert per Skript setzen löst tooLong nicht aus

const input = document.createElement('input');
input.maxLength = 5;
input.value = 'Programmierung'; // per Skript, nicht vom Nutzer

console.log(input.value.length);      // 14
console.log(input.validity.tooLong);  // false
console.log(input.checkValidity());   // true

14 false true

Längenprüfung selbst nachbauen (Codeeinheiten beachten)

// Serverseitig bzw. vor dem Absenden selbst prüfen, da tooLong
// bei per Skript gesetzten Werten nicht greift
const isTooLong = (el) => el.maxLength >= 0 && el.value.length > el.maxLength;

const field = document.createElement('input');
field.maxLength = 3;
field.value = '😀😀';

console.log(field.value.length);     // 4 (Emoji = 2 Codeeinheiten)
console.log([...field.value].length); // 2 sichtbare Zeichen
console.log(isTooLong(field));        // true

4 2 true

// Wichtig · Fallstricke

Nur Nutzereingaben zählen: Ein programmatisch gesetzter, zu langer Wert macht das Feld nicht ungültig. Wer Werte per Skript setzt, muss die Länge selbst prüfen.
Selten true: Browser verhindern das Eintippen oder Einfügen über maxlength hinaus meist schon selbst. tooLong betrifft daher vor allem vorbelegte Felder.
Codeeinheiten statt Zeichen: Emojis und manche Schriftzeichen zählen doppelt. Die Anzeige „x von y Zeichen“ kann deshalb von der Wahrnehmung des Nutzers abweichen.
Keine Sicherheitsgrenze: Die Validierung im Browser lässt sich umgehen. Längen immer auch auf dem Server prüfen.
Das Gegenstück für minlength ist ValidityState.tooShort. Beide werden von allen modernen Browsern unterstützt.

Siehe auch

ValidityState ValidityState.tooShort ValidityState.valid HTMLInputElement.maxLength HTMLInputElement.setCustomValidity() HTMLInputElement.checkValidity() VideoColorSpace.fullRange