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)
This could be achieved in a much simpler way using the built in HTML form validation and CSS pseudo classes
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.
Thank you for sharing this 🤠
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/
@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.
@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.
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.
Yeah Creating it this way can help in learning some javascript concepts
Basically for learning purpose
Even without the built in stuff, there are way better ways than this - with half as much code
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 ?
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
This is a good way to understand javascript cocnepts very well
Thanks for sharing this
Thank you