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;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" />
js
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
# dom-validitystate-rangeunderflow

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
rangeUnderflow

Legend

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

Full support
Full support

Siehe auch