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 ⁨July 2015⁩.

The read-onlyvalueMissing property of theValidityState interface indicates if arequired control, such as an<input>,<select>, or<textarea>, has an empty value.

If therequired attribute is set, and no<option> is selected or a<textarea> or user-editable<input> is empty, thevalueMissing property will betrue. The property is onlytrue 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 isfalse.

Value

A boolean that istrue if theValidityState is not set and therequired attribute is.

Missing required input value

The following example checks the validity of anumeric input element.Constraints have been added using themin attribute which sets a minimum value of18 for the input, and therequired 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;}

body {  margin: 0.5rem;}pre {  padding: 1rem;  height: 2rem;  background-color: lightgrey;  outline: 1px solid grey;}

html

<pre>Validation logged here...</pre><input type="number" 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}`);  }});