Do you have code to share? I need to see what you are doing in order to help you
this post was submitted on 27 Jan 2024
1 points (100.0% liked)
JavaScript
1982 readers
1 users here now
founded 1 year ago
MODERATORS
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 @[email protected] that exactly my question.. how can I trigger the validation process again ?
Thank @[email protected]
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..