ValidityState.tooShort — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.tooShort

Beschreibung

Die Eigenschaft tooShort des ValidityState-Objekts (erreichbar über element.validity) gibt an, ob der aktuelle Wert eines Formularfelds die mit minlength festgelegte Mindestlänge unterschreitet. Das betrifft <textarea> sowie <input> der Typen text, search, url, tel, email und password.

Wichtig: tooShort wird nur nach einer Bearbeitung durch den Benutzer wahr. Werte, die per Skript (input.value = "ab") oder über das value-Attribut im HTML gesetzt werden, lösen die Einschränkung nicht aus. Auch ein leeres Feld gilt nie als zu kurz. Soll Leere verhindert werden, braucht es zusätzlich required (geprüft über valueMissing).

Gemessen wird in UTF-16-Code-Einheiten, nicht in sichtbaren Zeichen. Ist tooShort wahr, ist auch validity.valid falsch, und das Element passt auf die CSS-Pseudoklasse :invalid. So kannst du eigene, verständliche Fehlermeldungen anzeigen, z. B. zusammen mit setCustomValidity() oder reportValidity().

Beispiele

Passwortlänge beim Tippen prüfen

// HTML: <input id="pw" type="password" minlength="8"> <span id="hint"></span>
const pw = document.querySelector('#pw');
const hint = document.querySelector('#hint');

pw.addEventListener('input', () => {
  if (pw.validity.tooShort) {
    const rest = pw.minLength - pw.value.length;
    hint.textContent = `Noch ${rest} Zeichen nötig.`;
  } else {
    hint.textContent = '';
  }
});

Nach Eingabe von "abc": Noch 5 Zeichen nötig.

Eigene Fehlermeldung beim Absenden

// HTML: <form id="f"><textarea name="msg" minlength="20" required></textarea><button>Senden</button></form>
const form = document.querySelector('#f');
const msg = form.elements.msg;

msg.addEventListener('input', () => {
  msg.setCustomValidity(
    msg.validity.tooShort
      ? `Bitte mindestens ${msg.minLength} Zeichen schreiben (aktuell ${msg.value.length}).`
      : ''
  );
});

form.addEventListener('submit', (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    form.reportValidity();
  }
});

Skript-gesetzte Werte lösen tooShort nicht aus

const input = document.createElement('input');
input.minLength = 5;
input.value = 'abc'; // per Skript gesetzt

console.log(input.validity.tooShort);
console.log(input.checkValidity());

false true

// Wichtig · Fallstricke

Nur bei Benutzereingabe: Per JavaScript gesetzte Werte führen nie zu tooShort === true. Für serverseitig vorbefüllte oder programmatisch geänderte Felder musst du die Länge selbst prüfen (z. B. value.length < minLength) und setCustomValidity() nutzen.
Leere Felder: Ein leerer Wert ist nie „zu kurz“. Kombiniere mit required, wenn eine Eingabe Pflicht ist.
Zeichenzählung: Die Länge wird in UTF-16-Code-Einheiten gemessen. Emojis oder manche Schriftzeichen zählen doppelt, daher kann die Meldung vom sichtbaren Zeichenzähler abweichen.
Gilt nicht für number, date, range usw. Dort greifen rangeUnderflow/rangeOverflow.
Die Prüfung im Client ist keine Sicherheitsmaßnahme. Validiere Eingaben immer zusätzlich auf dem Server.
Kompatibilität: wird in allen aktuellen Browsern unterstützt. Ältere Versionen von Safari und Edge (vor Chromium) haben minlength teils nicht ausgewertet.

Siehe auch

ValidityState ValidityState.tooLong ValidityState.valueMissing ValidityState.valid HTMLInputElement.setCustomValidity() HTMLFormElement.reportValidity() VideoFrame.rotation