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
:
input:invalid {
outline: red solid 3px;
}
<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);
}
});
Specifications
Specification |
---|
HTML Standard # dom-validitystate-badinput-dev |
Browser compatibility
BCD tables only load in the browser
See also
- ValidityState valid, customError properties.
- Guide: Constraint validation
- Tutorial: Form data validation