ValidityState: свойство valueMissing

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

Если атрибут required установлен, и ни один <option> не выбран, или значение <textarea> или пользовательского редактируемого <input> пустое, то свойство valueMissing будет true. Это свойство является true только если поле обязательно и не имеет значения; если поле не обязательно, или если поле обязательно и имеет значение, то значение является false.

Булево значение, которое равно true если атрибут ValidityState не установлен, а атрибут required установлен.

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

input:invalid {
  outline: red 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 if (userInput.validity.valueMissing) {
    log("Required field cannot be empty.");
  } else {
    log("Bad input detected: " + userInput.validationMessage);
  }
});

• Свойства ValidityState badInput, valid.
• Валидация ограничений
• Формы: Валидация форм
• Регулярные выражения