ValidityState: badInput 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-onlybadInput property of theValidityState interface indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.

Value

A boolean that istrue if theValidityState object does not conform to the expected type.

Examples

Detecting bad input

The following example checks the validity of anumeric input element.If the user enters text instead of a number, the element fails constraint validation, and the styles matchinginput:invalid are applied.The<pre> element above the input shows the validation message when the elementbadInput evaluates totrue:

css

input:invalid {  outline: red 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" />

const userInput = document.getElementById("age");const logElement = document.getElementById("log");function log(text) {  logElement.innerText = text;}userInput.addEventListener("input", () => {  userInput.reportValidity();  if (userInput.validity.badInput) {    log(`Bad input detected: ${userInput.validationMessage}`);  }});