~~ cross-posted from: https://programming.dev/post/9179830 ~~
Hi,
I’m loading some content with XHR (aka Ajax) the loaded
inputelements that have a invalidvalueassigned are not checked trough the validation process.so the
CSSstyling with:invalidis for example not working etc…is there a way to force the validation process on those elements ?
edit: Browser is Firefox
Thanks.
You must log in or # to comment.
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
:invalidshould 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 @[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 returnTruewhen 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…
There are several proposed workarounds there, like
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 ?
Try
form.reportValidity()where form is the form element.
Thanks all for your input.
My only workaround was to check programmatically all those
inputand set them with a setCustomValidity()Too bad there isn’t a method to relaunch the validity across all the page :/
Cheers
