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 des ValidityState-Interfaces zeigt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das step-Attribut des Elements festgelegten Einschrä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, wird stepMismatch auf true gesetzt, falls der Wert nicht den durch die step- und min-Werte festgelegten Einschränkungen entspricht. Wenn der Rest des Werts des Formularsteuerungselements minus dem min-Wert geteilt durch den step-Wert (der standardmäßig 1 ist, wenn er nicht angegeben wird) nicht null ist, besteht ein Mismatch.

Wert

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

Beispiele

Eingabe mit Schritt-Mismatch

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Es wurde eine Einschränkung mit dem step-Attribut hinzugefügt, was bedeutet, dass die Eingabe Inkremente von 5 als Werte erwartet. Wenn der Benutzer eine Zahl eingibt, die nicht durch 5 teilbar ist, schlägt die Gültigkeitsprüfung des Elements fehl, und die Stile, 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
# dom-validitystate-stepmismatch

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stepMismatch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch