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.

Learn more
See full compatibility

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.

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.

css

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

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 {
 log("Bad input detected...");
 }
});

[フレーム]