ValidityState: свойство stepMismatch

Только для чтения stepMismatch свойство интерфейса ValidityState указывает, соответствует ли значение <input>, после редактирования пользователем, ограничениям, установленным атрибутом элемента step.

Если поле имеет числовой характер, включая типы дата, месяц, неделя, время, datetime-local, число и диапазон, и значение step не any, если значение не соответствует ограничениям, установленным значениями step и min, то stepMismatch будет true. Если остаток от деления значения элемента управления формой минус значение min на значение step (которое по умолчанию равно 1, если не указано), не равно нулю, то есть несоответствие.

Булево значение, которое равно true , если значение не соответствует ограничениям.

В следующем примере проверяется корректность числового элемента ввода. Ограничение было добавлено с помощью атрибута step, что означает, что ввод ожидает приращения по 5 в качестве значений. Если пользователь введёт число, которое не делится на 5, элемент не проходит проверку ограничений, и применяются стили, соответствующие псевдоклассу CSS :invalid.

input:invalid {
  outline: red solid 3px;
}

<pre id="log">Validation logged here...</pre>
<input type="number" id="degrees" 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…");
  }
});

• Проверка ограничений
• Формы: Проверка данных формы
• Атрибут step