ValidityState: stepMismatch property - Web APIs | MDN
Value
A boolean that is true if the ValidityState does not conform to the constraints.
Examples
Input with step mismatch
The following example checks the validity of a numeric input element.
A constraint has been added using the step attribute which means the input expects increments of 5 as values.
If the user enters a number that's not divisible by 5, the element fails constraint validation, and the styles matching :invalid CSS pseudo-class are applied.
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="degrees" step="5" />
js
const userInput = document.getElementById("degrees");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.stepMismatch) {
log("Input must be divisible by 5");
} else {
log("Input is valid…");
}
});
Specifications
| Specification |
|---|
| HTML # dom-validitystate-stepmismatch |