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-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; }

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

html

<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}`); } });