ValidityState: valid 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 valid property of the ValidityState interface indicates if the value of an <input> element meets all its validation constraints, and is therefore considered to be valid.
If true, the element matches the :valid CSS pseudo-class; otherwise the :invalid CSS pseudo-class applies.
Value
A boolean that is true if the ValidityState does conform to all the constraints.
Examples
Displaying validity state
The following example checks the validity of a numeric input element.
A constraint has been added using the min attribute which sets a minimum value of 18 for the input.
If the user enters any value that's not a number greater than 17, the element fails constraint validation, and the styles matching input:invalid are applied.
input:invalid {
outline: red solid 3px;
}
input:valid {
outline: palegreen 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 {
log("Bad input detected…");
}
});
Specifications
| Specification |
|---|
| HTML # dom-validitystate-valid-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
valid
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- ValidityState badInput, customError properties.
- Constraint validation
- Forms: Data form validation