DEV Community

Cover image for Form Validation with JS and Tailwind

Form Validation with JS and Tailwind

Shubham Tiwari on November 26, 2022

Hello today i will share with you the form validation i created using HTML,Javascript and TailwindCSS.I will give a brief description about it and ...
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

This could be achieved in a much simpler way using the built in HTML form validation and CSS pseudo classes

Collapse
 
mattferrin profile image
Insight Lighthouse

It’s way understandable that a beginner wouldn’t use the built-in constraint api or would play without using it.

What isn’t understandable to me is how many popular libraries don’t use the built-in browser functionality. It gives the false impression that it’s not there or that it isn’t amazingly good.

I’ve been disagreed with many times for advocating React code that uses standard browser APIs. I haven’t had much trouble doing so though. You just have to trigger React to render at the exact appropriate times in the exact appropriate places. Not nothing, but better than the alternatives.

I’ve also had a tester aggressively prevent me from having default validation messages in the default language of the browser, even when all the higher ups said it was fine.

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you for sharing this 🤠

Collapse
 
ozzyogkush profile image
Derek Rosenzweig • Edited

I implemented my own library for handling form validation before frameworks like React started getting popular and before built-in validation was any good. So it's not quite compatible with React or the other newer frameworks (that I know of, I haven't tried it). One of the reasons I haven't touched it in years is because there are so many other libraries out there that fill that niche, and also because the built-in validation is more robust. That said, at my job we have a particular UI style which really can't use the built in validation. The main reason is consistency across OSes - if browsers somehow find a way to make that aspect possible/easier to do, I could see that changing. If you're interested, my library is ozzyogkush.github.io/formation/

Thread Thread
 
mattferrin profile image
Insight Lighthouse

@ozzyogkush, I’d be interested in learning how the constraint validation api doesn’t work across browsers or under any OS, if it doesn’t.

I do turn off the modals, I think by setting the form attribute novalidate to true. But the underlying validation messages are still there and displayable, and customizable too.

Thread Thread
 
mattferrin profile image
Insight Lighthouse

@ozzyogkush, in addition to the validationMessage property on each input, there’s also the validity property with state, and setCustomValidity is callable before each submit.

Collapse
 
lotfijb profile image
Lotfi Jebali

This is a good way to understand javascript cocnepts very well
Thanks for sharing this

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you