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.

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…"); } });