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-onlyvalid property of theValidityState interface indicates if the value of an<input> element meets all its validation constraints, and is therefore considered to be valid.

Iftrue, the element matches the:valid CSS pseudo-class; otherwise the:invalid CSS pseudo-class applies.

Value

A boolean that istrue if theValidityState does conform to all the constraints.

The following example checks the validity of anumeric input element.A constraint has been added using themin attribute which sets a minimum value of18 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 matchinginput: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>Validation logged here...</pre><input type="number" 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…");  }});