JavaScript @programming.dev Rick_C137 @programming.dev 8 mo. ago

How run validation on `input` that have a `value` set ?

~~ 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.

9 comments

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

You've viewed 9 comments.

How run validation on input that have a value set ?

How run validation on `input` that have a `value` set ?