The maxlength attribute has been around in browsers for a long time. When provided, all browsers prevent the user entering a value that exceeds the maxlength.

For example you cannot type more than 2 characters in the textbox below:

Constraint Validation

Constraint validation is an HTML5 spec that provides native client side form validation in the browser. As part of its API, all <input> and <textarea> elements have a validity.tooLong property that is true when the length of the value exceeds the maxlength.

But if the browser prevents this, then why does the property exist?

Prefilled value Attribute

Assume that you’re populating the value of form elements from a database and you end up with something like this:

<input type="text" maxlength="1" value="ABC">

How will the browser handle this?

All browsers will prevent entry of additional characters, but they do not trim excess characters already present. Additionally, all browsers will allow a form containing the above input to submit. Note: Opera is the only browser to set the validity.tooLong property to true in this situation. Despite this, it does not prevent form submission.

Why is submission not prevented? The key is in the specification:

Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the code-unit length of the element’s value is greater than the element’s maximum allowed value length, then the element is suffering from being too long.

The dirty flag essentially means that the user has changed the value of an element. Therefore, in order to be tooLong, the element must have been edited.

Actually Triggering tooLong

So let’s take another approach. What happens if you have the same input:

<input type="text" maxlength="1" value="ABC">

…remove one character, then submit? You can try it for yourself below:

Upon edit IE10 and Chrome will set the validity.tooLong property to true and prevent form submission. If the user attempts to submit a form after removing the “C” they will see the following in those browsers:

Firefox, Safari, and Opera incorrectly handle this situation and allow the form to be submitted anyways.