I have a form like this. The value comes from the database, and the user should fix the problem that keeps it from validating.
<style> input:invalid {border: 3px solid red} </style>
<form>
<input type="text" id="name" maxlength="10" value="A very very long name !">
</form>
I would expect that the input field is :invalid, but it isn't. input.checkValidity() and form.reportValidity() both return true.
Once I edit the field (delete a character), the field becomes invalid, and the javascript functions return false as expected.
How can I trigger the HTML validation through Javascript, instead of through user interaction?
input.checkValidity()andform.reportValidity().It is documented on WHATWG. Both minlength and maxlength require user interaction. To be more precise, when the user modifies the input value a "dirty value flag" is set, which is taken into account in the validation.