Baseline Widely available
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.
A boolean that is true if the ValidityState object does not conform to the expected type.
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;
}
body {
margin: 0.5rem;
}
pre {
padding: 1rem;
height: 2rem;
background-color: lightgrey;
outline: 1px solid grey;
}
<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);
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3