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-only badInput property of the ValidityState 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 is true if the ValidityState object does not conform to the expected type.

Examples

Detecting bad input

The following example checks the validity of a numeric input element. If the user enters text instead of a number, the element fails constraint validation, and the styles matching input:invalid are applied. The <pre> element above the input shows the validation message when the element badInput evaluates to true:

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 id="log">Validation logged here...</pre> <input type="number" id="age" />

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