HTML5 constraint-validation fails when data is pre-filled

Question

I\'m currently struggeling with HTML5 constraint validation.

Given this simple form:

Answer 1

The maxlength seems only to work after some changes are done on the content of the element. You can also use pattern to define the maxlength of the :

The constraint is evaluated only when the value of the attribute has been changed.
source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength

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 JavaScript string length of the element's API value is greater than the element's maximum allowed value length, then the element is suffering from being too long.
source: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-maxlength