The read-only valueMissing property of the ValidityState interface indicates if a required control, such as an <input>, <select>, or <textarea>, has an empty value.
If the required attribute is set, and no <option> is selected or a <textarea> or user-editable <input> is empty, the valueMissing property will be true. The property is only true if the field is required and has no value; if the field is not required, or if the field is required and has a value, the value is false.
A boolean that is true if the ValidityState is not set and the required attribute is.
The following example checks the validity of a numeric input element. Constraints have been added using the min attribute which sets a minimum value of 18 for the input, and the required attribute which disallows empty values. If the user enters any value that's not a number greater than 17, the element fails constraint validation, and the styles matching :invalid are applied.
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}`);
}
});