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..
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 returnTrue
when the length is longer thanmaxlength
! 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..