DEV Community

Discussion on: Vanilla JavaScript get all elements in a form

Collapse
 
dailydevtips1 profile image
Chris Bongers • Edited

Hey Adam,

That will give you literally all the elements including divs etc.
In my example, it will only give you form-based elements.

In cases where you need to either detect input change with JS I use this.
Or where you want custom validation (error messages etc)

Don't think the form validation API does any of that

For instance, see this angular example where I need to manually push change event after third-party plugin form film
Angular form detect

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

I agree it gives you all the elements so I probably meant to take the time to write elements which hold value but I am on my phone so... None the less such css selector is no more painful to write (if on a keyboard).

For the custom messages, everyone gets the wrong end of the stick when I spout this commonly sited answer. To them I usually say "Add novalidate to your html form element and build a minimal custom validation messaging UI but retain the native validation methods." - it never goes well.

Collapse
 
tunaxor profile image
Angel Daniel Munoz Gonzalez

just for reference, the validation API does allow you to set a custom message
developer.mozilla.org/en-US/docs/W...

although, it's quite clunky some times, a better example can be found here
developer.mozilla.org/en-US/docs/W...

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀

Exactly, a good starting point. If it where me, I would just add no validate to the form and use the sited API adding messages to a div. I like that you can though, good info.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Ah pretty cool I would indeed opt for custom validation since designers love inline validation or some custom view to it.

Pretty neat however we can use it to set custom validation as well!
Going to spend some time on this and see what I can find out about this validation API and custom errors.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Just found this explanation:
css-tricks.com/form-validation-par...

Just looking at the last description he still uses the javascript method to get all the forms elements.
Just trying to say even with the validation API it still seems to have it's use-cases to get all a form's elements?