~~ cross-posted from: https://programming.dev/post/9179830 ~~

Hi,

I’m loading some content with XHR (aka Ajax) the loaded input elements that have a invalid value assigned are not checked trough the validation process.

so the CSS styling with :invalid is for example not working etc…

is there a way to force the validation process on those elements ?

edit: Browser is Firefox

Thanks.

    • @Rick_C137OPEnglish
      1•4 months ago

      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…

  • @Rick_C137OPEnglish
    1•3 months ago

    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