~~ 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.
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
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…
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.Check this out:
https://stackoverflow.com/questions/7002230/trigger-standard-html-validation-form-without-using-submit-button#17698873
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 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
https://caniuse.com/constraint-validation