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 Standard
# dom-validitystate-stepmismatch

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch