ValidityState: stepMismatch-Eigenschaft

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.

Die schreibgeschützte stepMismatch-Eigenschaft der ValidityState-Schnittstelle zeigt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das step-Attribut des Elements festgelegten Beschränkungen entspricht.

Wenn das Feld numerischer Natur ist, einschließlich der Typen date, month, week, time, datetime-local, number und range und der Schrittwert nicht any ist, gilt: Wenn der Wert nicht den durch step und min festgelegten Einschränkungen entspricht, ist stepMismatch true. Wenn der Restwert des Wertes des Formularelements abzüglich des min-Wertes, dividiert durch den step-Wert (der standardmäßig 1 ist, wenn er weggelassen wird), ungleich null ist, liegt ein Mismatch vor.

Wert

Ein boolean, der true ist, wenn der ValidityState nicht den Beschränkungen entspricht.

Beispiele

Eingabe mit Schrittabweichung

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Mit dem step-Attribut wurde eine Einschränkung hinzugefügt, was bedeutet, dass die Eingabe Werte in Schritten von 5 erwartet. Wenn der Benutzer eine Zahl eingibt, die nicht durch 5 teilbar ist, scheitert das Element an der Gültigkeitsprüfung der Einschränkung, und die Styles, die der :invalid CSS-Pseudoklasse entsprechen, werden angewendet.

css
input:invalid {
  outline: red solid 3px;
}
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…");
  }
});

Spezifikationen

Specification
HTML Standard
# dom-validitystate-stepmismatch

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch