HTMLInputElement.minLength — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.minLength

Beschreibung

Die Eigenschaft minLength spiegelt das HTML-Attribut minlength eines <input>-Elements wider. Sie legt fest, wie viele Zeichen ein vom Benutzer eingegebener Wert mindestens haben muss. Ist der Wert kürzer, gilt das Feld bei der Constraint Validation als ungültig: validity.tooShort ist dann true, und das Formular wird nicht abgeschickt.

Die Eigenschaft wirkt nur bei den Eingabetypen text, search, url, tel, email und password. Bei anderen Typen, etwa number oder date, wird sie ignoriert. Ist kein Attribut gesetzt, liefert die Eigenschaft -1.

Typische Anwendungsfälle sind Mindestlängen für Passwörter, Benutzernamen oder Suchbegriffe. Außerdem können Sie die Einschränkung zur Laufzeit ändern, zum Beispiel abhängig von einer anderen Auswahl im Formular. Gezählt wird in UTF-16-Codeeinheiten, nicht in sichtbaren Zeichen. Ein Emoji wie „😀“ zählt deshalb als 2.

Parameter

Name	Typ	Default	Beschreibung
$value	number	-1 (kein Attribut)	Nur beim Setzen: eine nicht-negative ganze Zahl. Sie wird als Attribut `minlength` ins DOM geschrieben.

Rückgabewert

Typ

number

Beschreibung

Die minimale Zeichenzahl als ganze Zahl oder -1, wenn das Attribut minlength fehlt oder ungültig ist.

Beispiele

Mindestlänge auslesen und setzen

const input = document.createElement('input');
input.type = 'password';

console.log(input.minLength); // noch kein Attribut

input.minLength = 12;
console.log(input.minLength);
console.log(input.getAttribute('minlength'));

-1 12 "12"

Live-Rückmeldung bei zu kurzer Eingabe

// HTML: <input id="user" type="text" minlength="4" required><span id="hint"></span>
const user = document.querySelector('#user');
const hint = document.querySelector('#hint');

user.addEventListener('input', () => {
  const fehlend = user.minLength - user.value.length;
  hint.textContent = user.validity.tooShort
    ? `Noch ${fehlend} Zeichen erforderlich`
    : '';
});

Mindestlänge dynamisch abhängig von einer Auswahl

// HTML: <select id="typ"><option value="plz">PLZ</option><option value="iban">IBAN</option></select>
//       <input id="feld" type="text">
const typ = document.querySelector('#typ');
const feld = document.querySelector('#feld');

const regeln = { plz: 5, iban: 22 };

const aktualisieren = () => {
  feld.minLength = regeln[typ.value];
  feld.placeholder = `mind. ${feld.minLength} Zeichen`;
};

typ.addEventListener('change', aktualisieren);
aktualisieren();
console.log(feld.minLength);

5

UTF-16-Zählung beachten

const input = document.createElement('input');
input.minLength = 3;

const text = 'a😀';
console.log(text.length);        // UTF-16-Codeeinheiten
console.log([...text].length);   // sichtbare Zeichen (Codepoints)

3 2

// Wichtig · Fallstricke

Leere Felder sind gültig: minLength greift nur, wenn ein Wert vorhanden ist. Wenn das Feld Pflicht sein soll, setzen Sie zusätzlich required.
Nur Benutzereingaben werden geprüft: Wenn Sie den Wert per Skript setzen (input.value = 'ab'), wird validity.tooShort in der Regel nicht true. Ein zu kurzer vorbelegter Wert erzeugt also keinen Fehler. Prüfen Sie in diesem Fall selbst und melden Sie den Fehler über setCustomValidity().
Negative Werte: Wenn Sie einen negativen Wert zuweisen, wird eine DOMException vom Typ IndexSizeError ausgelöst.
Ist minLength größer als maxLength, kann das Feld nie gültig werden.
Gezählt wird in UTF-16-Codeeinheiten. Emojis und manche Schriftzeichen zählen doppelt. Das kann Benutzer verwirren.
Sicherheit: Die Prüfung im Browser lässt sich leicht umgehen. Prüfen Sie die Länge deshalb immer auch auf dem Server.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Sehr alte Versionen des Internet Explorers und von Safari kannten das Attribut nicht.

Siehe auch

HTMLInputElement.list HTMLInputElement.maxLength HTMLInputElement.files HTMLInputElement.min HTMLInputElement.width