DEV Community

Norberto Santiago
Norberto Santiago

Posted on

Client Side Form Validation

Reference:
Florine Pop Youtube Video - https://www.youtube.com/watch?v=rsd4FNGTRBw&t=1269s&ab_channel=FlorinPop

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

You can simplify this a lot, without that amount of JS, using the native HTML5 validations (which also produce a better UX for mobile and screen readers):

If you really want to show the errors inline, you can use the invalid event in the form and show the errors manually, you could also use setCustomValidity if needed.

Cheers!

PS: Fixing the code I noticed that you made all your labels for the same, so all the labels point to the "first-name" field.

Collapse
nsantiago profile image
Norberto Santiago Author

Thanks for your inputs and suggestions. This is some clean and simple code I'll consider in future projects.