ValidityState: свойство badInput

Только для чтения badInput свойство интерфейса ValidityState указывает, предоставил ли пользователь входные данные, которые браузер не может преобразовать. Например, если у вас есть элемент ввода числа, содержимое которого — строка.

Логическое значение, которое равно true если объект ValidityState не соответствует ожидаемому типу.

В следующем примере проверяется корректность элемента числового элемента ввода. Если пользователь вводит текст вместо числа, элемент не проходит проверку ограничений, и применяются стили, соответствующие input:invalid. Элемент <pre> над элементом ввода отображает сообщение об ошибке проверки, когда элемент badInput имеет значение true:

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

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

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.badInput) {
    log("Bad input detected: " + userInput.validationMessage);
  }
});

• Свойства ValidityState valid, customError.
• Руководство: Проверка форм
• Учебник: Валидация данных формы