DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Form Validation with JS and Tailwind
Mysterio
Mysterio

Posted on

Form Validation with JS and Tailwind

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 then you can check the entire code in the codepen below at the bottom.

Let's get started...

  • I put the required attribute in all the inputs to make them required field.
  • For the Name input field, i am checking whether it is empty or not.
  • For the Email input field, i have taken a regular expression from the web and test it on my email.
  • For the Phone number input field , i am checking that whether it has a length of 10 digits or not.
  • For the Password input field , i am checking multiple things like does it contain lowercase and uppercase letters, number,it's length is greated than or equal to 10 or not,I am showing these all errors separately and using conditional statements, hiding and showing each one of them using css display property.
  • For the Confirm password input field, i am checking the same thing as password except one extra thing here which is whether the confirm password is matching the password or not.
  • These functions are called on each "keyup" event so , it is dynamic and will show the error if there is any on each character or letter or number you type.

I hope you will like this simple validation and if there is any correction or suggestion , you can write it in the comment section.

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank youπŸ‘‡πŸ‘‡ ^^
β˜• --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (13)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited on

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

Collapse
 
mattferrin profile image
Matthew Ferrin

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
Mysterio

Thank you for sharing this 🀠

Collapse
 
ozzyogkush profile image
Derek Rosenzweig • Edited on

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
Matthew Ferrin

@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
Matthew Ferrin

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

Thread Thread
 
ozzyogkush profile image
Derek Rosenzweig

To be fair I haven't read up on native validation in a while, so I'm making assumptions. OS-specific UI issues I was talking about include styling elements, alert boxes, and other widgets rendered by the OS. I'm not actually sure how that applies to form element validation.

What we use at my work (on at least one of our products) is a separate home-built system with React and a HOC that handles validation state and messaging, but it's possible we could slim it down and rely on built in functionality - assuming it's possible to make it look and behave the same across the browsers we support, and how well we can accommodate our UI/UX designers. That said, we're actually using MUI in newer products, and possibly Web Components in the future. So there'll probably be an opportunity to look into it for that, but it won't be my job to implement it for once.

Collapse
 
shubhamtiwari909 profile image
Mysterio

Yeah Creating it this way can help in learning some javascript concepts
Basically for learning purpose

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Even without the built in stuff, there are way better ways than this - with half as much code

Thread Thread
 
shubhamtiwari909 profile image
Mysterio

Yeah but creating like as a beginner can also help in thinking about doing things in different, I am talking about Going from A to B to C and you are talking about directly going to C and when you started learning web development, you created everything professionally in your early days of learning or started from basics and then with time improved the way of writing code ?

Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Well, way back when I first started using JS with forms I used the DOM stuff that allows you to work with form data directly - instead of writing code that ignores the fact that you're using a form

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
Mysterio

Thank you

Tired of sifting through your feed?

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.