Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort below:

ValidityState: tooShort property - Web APIs

Baseline Widely available

The read-only tooShort property of the ValidityState interface indicates if the value of an <input>, <button>, <select>, <output>, <fieldset> or <textarea>, after having been edited by the user, is less than the minimum code-unit length established by the element's minlength attribute.

A boolean that is true if the ValidityState does not conform to the constraints.

The following example checks the validity of a text input element. A constraint has been added using the minlength attribute so the input expects a string with a minimum of 4 characters. If the user enters a string that's too short, the element fails constraint validation, and the styles matching :invalid CSS pseudo-class are applied.

input:invalid {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

<pre id="log">Validation logged here...</pre>
<input type="text" id="userText" minlength="4" />

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooShort) {
    log("Not enough characters entered.");
  } else {
    log("Input is valid…");
  }
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3