ValidityState: tooShort property

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.

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.

Value

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

Examples

Input with too short string value

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.

css
input:invalid {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="text" id="userText" minlength="4" />
js
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…");
  }
});

Specifications

Specification
HTML
# dom-validitystate-tooshort-dev

Browser compatibility

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
tooShort

Legend

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

Full support
Full support

See also