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
