this post was submitted on 27 Jan 2024
7 points (100.0% liked)

JavaScript

1989 readers
1 users here now

founded 1 year ago
MODERATORS
[email protected]
[email protected]
[email protected]
7
How run validation on input that have a value set ? (programming.dev)
submitted 9 months ago* (last edited 9 months ago) by [email protected] to c/[email protected]
9 comments fedilink hide all child comments
 

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

top 9 comments
sorted by: hot top controversial new old
[–] [email protected] 2 points 9 months ago (1 children)

Do you have code to share? I need to see what you are doing in order to help you

[–] [email protected] 1 points 9 months ago* (last edited 9 months ago) (2 children)

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

[–] [email protected] 1 points 9 months ago (1 children)
[–] [email protected] 1 points 9 months ago* (last edited 9 months ago) (1 children)

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

[–] [email protected] 1 points 9 months ago

There are several proposed workarounds there, like

https://caniuse.com/constraint-validation

[–] [email protected] 1 points 9 months ago (1 children)

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.

[–] [email protected] 1 points 9 months ago (1 children)

Thank you @[email protected] that exactly my question.. how can I trigger the validation process again ?

[–] [email protected] 1 points 9 months ago

Try form.reportValidity() where form is the form element.

[–] [email protected] 1 points 9 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