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.
input:invalid {
outline: red solid 3px;
}
<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…");
}
});
Specifications
| Specification |
|---|
| HTML # dom-validitystate-tooshort-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
tooShort
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support