files/en-us/web/api/validitystate/valid/index.md
{{APIRef("HTML DOM")}}
The read-only valid property of the ValidityState interface indicates if the value of an {{HTMLElement("input")}} element meets all its validation constraints, and is therefore considered to be valid.
If true, the element matches the {{cssxref(":valid")}} CSS pseudo-class; otherwise the {{cssxref(":invalid")}} CSS pseudo-class applies.
A boolean that is true if the ValidityState does conform to all the constraints.
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;
}
body {
margin: 0.5rem;
}
pre {
padding: 1rem;
height: 2rem;
background-color: lightgrey;
outline: 1px solid grey;
}
<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…");
}
});
{{EmbedLiveSample("displaying_validity_state", "100%", "140")}}
{{Specifications}}
{{Compat}}