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 December 2018.

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.

css
input:invalid {
  outline: red solid 3px;
}
input:valid {
  outline: palegreen solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />
js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
valid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also