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 gibt 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, und der Wert nicht den durch die Werte step und min festgelegten Einschränkungen entspricht, dann wird stepMismatch auf wahr gesetzt. Wenn der Rest des Werts des Formularsteuerungselements minus dem Wert von min geteilt durch den Wert von step (der standardmäßig 1 ist, wenn er weggelassen wird) nicht null ist, liegt ein Mismatch vor.

Wert

Ein boolescher Wert, 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 Eingabe-Elements. Eine Einschränkung wurde unter Verwendung des step-Attributs hinzugefügt, was bedeutet, dass die Eingabeinkremente von 5 als Werte erwartet. Wenn der Benutzer eine Zahl eingibt, die nicht durch 5 teilbar ist, schlägt die Validierung der Einschränkung fehl, und die Stile, die zur :invalid CSS-Pseudoklasse passen, werden angewendet.

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

Spezifikationen

Specification
HTML # dom-validitystate-stepmismatch