ValidityState: свойство rangeUnderflow

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

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

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

Следующий пример проверяет правильность элемента числового элемента ввода. Ограничение добавлено с помощью атрибута min, который задаёт минимальное значение 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" min="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.rangeUnderflow) {
    log("Number is too low!");
  } else {
    log("Valid…");
  }
});

• ValidityState.rangeOverflow
• Проверка ограничений
• Формы: Проверка форм
• step атрибут
• max атрибут