ValidityState: `rangeUnderflow`-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 rangeUnderflow-Eigenschaft des ValidityState-Interfaces gibt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das min-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 ein min-Wert festgelegt ist, ist die rangeUnderflow-Eigenschaft true, wenn der Wert nicht den durch den min-Wert festgelegten Einschränkungen entspricht.

Wert

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

Beispiele

Eingabe mit numerischem Unterlauf

Im folgenden Beispiel wird die Gültigkeit eines numerischen Eingabeelements überprüft. Eine Einschränkung wurde mit dem min-Attribut hinzugefügt, das einen Mindestwert von 18 für die Eingabe setzt. Wenn der Benutzer eine Zahl kleiner als 18 eingibt, schlägt die Validierung der Einschränkung fehl und es greifen die Styles, die auf die CSS-Pseudoklassen :invalid und :out-of-range zutreffen.

css

/* or :invalid */
input:out-of-range {
  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="age" min="18" />

const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.rangeUnderflow) {
    log("Number is too low!");
  } else {
    log("Valid…");
  }
});

Spezifikationen

Specification
HTML Standard # dom-validitystate-rangeunderflow

Browser-Kompatibilität

BCD tables only load in the browser