Состояние проверки: свойство valid

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

Если true, элемент соответствует псевдоклассу CSS :valid; в противном случае применяется псевдокласс CSS :invalid.

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

Следующий пример проверяет корректность числового элемента ввода числового элемента ввода. Ограничение добавлено с помощью атрибута min, который задает минимальное значение 18 для ввода. Если пользователь вводит значение, которое не является числом, большим 17, проверка ограничений не пройдена, и применяются стили, соответствующие input:invalid.

input:invalid {
  outline: red solid 3px;
}
input:valid {
  outline: palegreen solid 3px;
}

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

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.valid) {
    log("Input OK…");
  } else {
    log("Bad input detected…");
  }
});

• Свойства ValidityState badInput, customError.
• Проверка ограничений
• Формы: Проверка данных форм