Do you have code to share? I need to see what you are doing in order to help you
It will not be digest to send all what I use for you to see it (it will lead to TL;DR)
but here an elements (loaded with XHR that give the problem
<input id="something" name="something" type="text" placeholder="aPlaceholder" minlength="3" maxlength="32" value="this value is more than the limiation of 32 char" autofocus required>
So normally this element should be invalid and a CSS selector of :invalid should match. but it's not the case because the browser seem to not run the validation check on loaded elements... !?
if we edit manually the input , for example removing one character then the validation process kick-in and the CSS selector work etc..
Usually validation is only triggered on change or blur events. Changing the value programmatically doesn't trigger these events so you need to trigger them yourself.
Thank you @coffee_poops@sh.itjust.works that exactly my question.. how can I trigger the validation process again ?
Try form.reportValidity() where form is the form element.
Thank @daisyKutter@lemmy.ml
it's look like that that code only verify the form when submitting.. I need to check the validity when the element has been loaded.
btw checkValidity() do not solve this issue as it return True when the length is longer than maxlength ! O_o I guess this is were is lying the "bug"
My two cent
For me this is a huge flaw ! I don't understand how we (dev) are we still developing on "standard" that are so f*ck-up..
There are several proposed workarounds there, like
Thanks all for your input.
My only workaround was to check programmatically all those input and set them with a setCustomValidity()
Too bad there isn't a method to relaunch the validity across all the page :/
Cheers