ValidityState: valueMissing property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

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.

Value

A boolean that is true if the ValidityState is not set and the required attribute is.

Missing required input value

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.

css
input:invalid {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />
js
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);
  }
});

Specifications

Specification
HTML Standard
# dom-validitystate-valuemissing-dev

Browser compatibility

BCD tables only load in the browser

See also