ValidityState: свойство rangeOverflow

Только для чтения rangeOverflow свойство интерфейса ValidityState указывает, соответствует ли значение <input>, после редактирования пользователем, ограничениям, заданным атрибутом элемента max.

Если поле является числовым, включая типы дата, месяц, неделя, время, datetime-local, число и диапазон, и задано значение max, если значение не соответствует ограничениям, заданным значением max, то свойство rangeOverflow будет истинным.

Булево значение, которое true , если значение не соответствует ограничениям.

Следующий пример проверяет корректность числового элемента ввода. Ограничение было добавлено с помощью атрибута max, который устанавливает максимальное значение 18 для ввода. Если пользователь введёт число больше 18, элемент не пройдёт проверку корректности, и стили, соответствующие псевдоклассам :invalid и :out-of-range CSS, будут применены.

/* or :invalid */
input:out-of-range {
  outline: red solid 3px;
}

<pre id="log">Validation logged here...</pre>
<input type="number" id="age" max="18" />

const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.rangeOverflow) {
    log("Number is too high!");
  } else {
    log("Input is valid…");
  }
});

• ValidityState.rangeUnderflow
• Проверка ограничений
• Формы: Валидация данных формы
• Атрибут step
• Атрибут min