ValidityState: stepMismatch property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The read-onlystepMismatch property of theValidityState interface indicates if the value of an<input>, after having been edited by the user, does not conform to the constraints set by the element'sstep attribute.

If the field is numeric in nature, including thedate,month,week,time,datetime-local,number andrange types and the step value is notany, if the value don't doesn't conform to the constraints set by thestep andmin values, thenstepMismatch will be true. If the remainder of the form control's value less themin value, divided by thestep value (which defaults to 1 if omitted) is not zero, there is a mismatch.

Value

A boolean that istrue if theValidityState does not conform to the constraints.

Examples

Input with step mismatch

The following example checks the validity of anumeric input element.A constraint has been added using thestep 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>Validation logged here...</pre><input type="number" step="5" />

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…");  }});