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.
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);
}
});
Specifications
Specification |
---|
HTML Standard # dom-validitystate-valuemissing-dev |
Browser compatibility
BCD tables only load in the browser
See also
- ValidityState badInput, valid properties.
- Constraint validation
- Forms: Data form validation
- Regular Expressions