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 <input> element. You can also use pattern to define the maxlength of the <input>:

<form action="/" method="post">
    <input type="text" name="comeGetSome" value="This is way too long" required="required" pattern=".{1,10}" /><br />      
    <input type="submit" value="Send me" />
</form>

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