ValidityState: tooLong 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.

See full compatibility

The read-only tooLong property of the ValidityState interface indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.

Value

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

Examples

Textarea with too long character count

The following example checks the validity of a textarea element. A constraint has been added using the maxlength attribute so the textarea expects a maximum of 10 characters. If there are too many characters in the textarea (which is true below), the element fails constraint validation, and the styles matching :invalid CSS pseudo-class are applied.

When editing the textarea, the browser will not allow the user to add characters that would fail constraint validation of maximum character count, so at first, only deleting characters is allowed. Newline characters are normalized and count as a single character in the maximum length calculation.

css

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

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

html

<pre id="log">Validation logged here...</pre>
<textarea name="story" id="userText" maxlength="10" rows="5">
It was a dark and


stormy night...
</textarea>

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooLong) {
    log("Too many characters in the textarea.");
  } else {
    log("Input is valid…");
  }
});

Specifications

Specification
HTML # dom-validitystate-toolong-dev

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`tooLong`	Chrome – Full support Chrome 4 (Release date: 2010-01-25) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote footnote Not supported in the unlikely case of the value being initially set too long, and then changed by the user to a still incorrect state. Per caniuse.com.	Firefox – Full support Firefox 4 (Release date: 2011-03-22) footnote footnote Not supported in the unlikely case of the value being initially set too long, and then changed by the user to a still incorrect state. Per caniuse.com.	Opera – Full support Opera 12.1 (Release date: 2012-11-20) footnote Full support	Safari – Full support Safari 5 (Release date: 2010-06-07) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 64 (Release date: 2018-12-11) footnote Full support	Opera Android – Full support Opera Android 12.1 (Release date: 2012-10-09) footnote Full support	Safari on iOS – Full support Safari on iOS 5 (Release date: 2011-10-12) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4 (Release date: 2011-10-18) footnote Full support	WebView on iOS – Full support WebView on iOS 5 (Release date: 2011-10-12) footnote Full support

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

Full support: Full support
: See implementation notes.