ValidityState.rangeOverflow — Eigenschaft · JavaScript-Referenz

Signatur

ValidityState.rangeOverflow

Beschreibung

Die Eigenschaft rangeOverflow des ValidityState-Objekts (erreichbar über element.validity) zeigt an, ob der aktuelle Wert eines <input>-Elements den durch das Attribut max festgelegten Höchstwert überschreitet. Ist das der Fall, ist rangeOverflow true, das Element passt auf die CSS-Pseudoklassen :invalid und :out-of-range, und validity.valid ist false.

Die Prüfung greift nur bei Eingabetypen mit geordneten Werten: number, range, date, month, week, time und datetime-local. Bei Datums- und Zeittypen wird chronologisch verglichen, z. B. ist 2025-01-01 bei max="2024-12-31" ein Überlauf.

Nützlich ist die Eigenschaft, wenn man eigene, genaue Fehlermeldungen ausgeben will, statt sich auf die allgemeinen Browser-Meldungen zu verlassen. Typischerweise liest man sie im input- oder invalid-Ereignis aus und setzt dann mit setCustomValidity() einen passenden Text.

Das Gegenstück für Werte unterhalb von min ist ValidityState.rangeUnderflow.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Wert größer als max ist, sonst false (auch dann, wenn kein max gesetzt oder das Feld leer ist).

Beispiele

Einfache Prüfung eines Zahlenfelds

// <input id="alter" type="number" min="0" max="120">
const alter = document.querySelector('#alter');
alter.value = '150';
console.log(alter.validity.rangeOverflow);
console.log(alter.validity.valid);

true false

Eigene Fehlermeldung beim Eingeben

// <input id="menge" type="number" min="1" max="10" required>
const menge = document.querySelector('#menge');

menge.addEventListener('input', () => {
  // Vorherige eigene Meldung zurücksetzen, sonst bleibt das Feld ungültig
  menge.setCustomValidity('');

  if (menge.validity.rangeOverflow) {
    menge.setCustomValidity(`Maximal ${menge.max} Stück pro Bestellung.`);
  } else if (menge.validity.rangeUnderflow) {
    menge.setCustomValidity(`Mindestens ${menge.min} Stück.`);
  }
  menge.reportValidity();
});

Datumsfeld: Termin darf nicht nach Jahresende liegen

// <input id="termin" type="date" max="2024-12-31">
const termin = document.querySelector('#termin');
termin.value = '2025-01-15';

const pruefeTermin = (feld) =>
  feld.validity.rangeOverflow
    ? `Bitte ein Datum bis spätestens ${feld.max} wählen.`
    : 'Datum ok';

console.log(pruefeTermin(termin));

Bitte ein Datum bis spätestens 2024-12-31 wählen.

// Wichtig · Fallstricke

Kein Effekt bei Textfeldern: Bei type="text" wird max ignoriert, rangeOverflow bleibt immer false. Für die Länge gibt es maxlength bzw. tooLong.
Bei type="range" klemmt der Browser den Wert automatisch auf max. Deshalb ist rangeOverflow dort praktisch nie true.
Ungültige oder leere Eingaben: Lässt sich der Wert nicht als Zahl bzw. Datum lesen (z. B. ein leeres Feld), ist rangeOverflow false. Bei type="number" kann dann stattdessen badInput gesetzt sein.
setCustomValidity() zurücksetzen: Eine eigene Meldung macht das Feld dauerhaft ungültig, bis sie mit setCustomValidity('') wieder gelöscht wird.
Nur auf dem Client: Die Prüfung im Browser lässt sich umgehen. Werte deshalb immer auch auf dem Server prüfen.
Die Eigenschaft wird von allen aktuellen Browsern unterstützt. Bei time-Feldern mit min > max (Zeitspanne über Mitternacht) weicht das Verhalten ab, weil der zulässige Bereich dann umgekehrt gilt.

Siehe auch

ValidityState ValidityState.rangeUnderflow ValidityState.stepMismatch ValidityState.valid HTMLInputElement.setCustomValidity() HTMLInputElement.reportValidity()