Signatur
Beschreibung
Die schreibgeschützte Eigenschaft rangeUnderflow der Schnittstelle ValidityState zeigt an, ob der aktuelle Wert eines <input>-Elements die Untergrenze aus dem min-Attribut unterschreitet. Ist das der Fall, liefert sie true. Das Element gilt dann als ungültig und passt auf die CSS-Pseudoklassen :invalid und :out-of-range.
Die Prüfung greift nur bei Eingabetypen mit geordnetem Wertebereich: number, range, date, month, week, time und datetime-local. Bei Text-Feldern gibt es keine Unterschreitung eines Wertebereichs. Für zu kurze Zeichenketten ist stattdessen tooShort zuständig, das sich auf minlength bezieht.
Man greift auf die Eigenschaft über element.validity.rangeUnderflow zu. Das ist vor allem nützlich, wenn man eigene, gezielte Fehlermeldungen anzeigen will, statt sich auf die allgemeine Standardmeldung des Browsers zu verlassen. Oft kombiniert man sie mit setCustomValidity() oder mit einer eigenen Fehleranzeige im DOM.
Rückgabewert
true, wenn der Wert kleiner als min ist, sonst false. Das gilt auch, wenn das Feld leer ist oder kein min gesetzt ist.Beispiele
Einfache Prüfung eines Zahlenfelds
// HTML: <input id="alter" type="number" min="18">
const alter = document.querySelector('#alter');
alter.value = '16';
console.log(alter.validity.rangeUnderflow);
console.log(alter.checkValidity());Eigene Fehlermeldung bei zu frühem Datum
// HTML: <input id="termin" type="date" min="2024-01-01">
const termin = document.querySelector('#termin');
termin.addEventListener('input', () => {
// Zuerst zurücksetzen, sonst bleibt das Feld dauerhaft ungültig
termin.setCustomValidity('');
if (termin.validity.rangeUnderflow) {
termin.setCustomValidity(`Bitte ein Datum ab dem ${termin.min} wählen.`);
}
termin.reportValidity();
});Formular-Validierung mit gezielter Fehlerausgabe
// HTML:
// <form id="bestellung" novalidate>
// <input name="menge" type="number" min="1" max="99" required>
// <span class="fehler"></span>
// <button>Bestellen</button>
// </form>
const form = document.querySelector('#bestellung');
const menge = form.elements.menge;
const fehler = form.querySelector('.fehler');
const meldung = (el) => {
const v = el.validity;
if (v.valueMissing) return 'Bitte eine Menge angeben.';
if (v.rangeUnderflow) return `Mindestens ${el.min} Stück.`;
if (v.rangeOverflow) return `Höchstens ${el.max} Stück.`;
return '';
};
form.addEventListener('submit', (event) => {
const text = meldung(menge);
fehler.textContent = text;
if (text) event.preventDefault();
});
menge.value = '0';
console.log(meldung(menge));Dynamisch geändertes min-Attribut
const feld = document.createElement('input');
feld.type = 'number';
feld.value = '5';
console.log(feld.validity.rangeUnderflow); // kein min gesetzt
feld.min = '10';
console.log(feld.validity.rangeUnderflow); // wird sofort neu berechnet// Wichtig · Fallstricke
- Leere Felder: Ist ein Feld leer, ist
rangeUnderflowimmerfalse. Pflichtfelder prüft man deshalb zusätzlich überrequiredbzw.valueMissing. - Ungültiges
min: Lässt sich der Wert immin-Attribut nicht auswerten (z. B.min=\"abc\"beitype=\"number\"), findet keine Prüfung statt und die Eigenschaft bleibtfalse. type=\"range\": Schieberegler begrenzen ihren Wert selbst auf den erlaubten Bereich. Deshalb istrangeUnderflowhier praktisch nietrue.- Zeit mit Tageswechsel: Ist bei
type=\"time\"mingrößer alsmax(z. B. 22:00–06:00), gilt der Bereich als über Mitternacht reichend. Die Prüfung verhält sich dann anders, als man es zunächst erwartet. - Nicht clientseitig allein prüfen: Eine Prüfung im Browser lässt sich leicht umgehen. Werte deshalb immer auch auf dem Server kontrollieren.
setCustomValidity()zurücksetzen: Eine eigene Fehlermeldung setztcustomErrorauftrue. Sie muss mitsetCustomValidity('')wieder gelöscht werden, sonst bleibt das Feld ungültig.- Die Eigenschaft wird von allen modernen Browsern unterstützt.