I have a challenge for you. Go out to your favorite websites and see how many of them don't have a form anywhere on the site. I'll wait. If you actually find some websites without any forms though, drop them in the comments because I've only seen this on super old websites.
My point is that forms are everywhere. They come in different shapes and sizes and are responsible for all kinds of information. That's why it can be easy to overlook how much validation goes into creating a form.
What is it
If you have user input saving to a database you better make sure you know exactly what to expect from that input. The way you do that is by using validations to make the user put in the information in the format you need. I'm sure you've gotten that invalid email address error at some point.
That's because you need to enter your email in a certain format to pass the validation tests. This extends to regular text-boxes as well. That's why you can't put your address where the phone number should go. It's also why you can't enter a credit card number that doesn't have the right amount of digits.
Why it's important
You need form validation as a security measure. Forms are an easy target for hackers because we all know they're connected to a database somehow. Letting people put whatever they want into your form opens you up to SQL injection attacks as a start and it can get way more advanced than that.
Besides saving you from hackers, form validation also saves you from users. People do some weird stuff man. Somebody could crash your website by putting a ridiculous value into your form just because they felt like it.
Form validation is important for way more reasons than these, but these are the two that I've seen destroy projects.
How it works
Thankfully, form validation isn't super hard. There are tons of great libraries out there and most of the frameworks, both back and front end, have some kind of built-in validation. It's really just a bunch of checks.
Is the phone number an actual number? Does the address have the format you expect and is it a real location? Did the user put info in all of the fields you need? You're making sure that you answer all of these little questions get handled.
Honestly, you can probably get away with some if-else statements, switch statements, and a few regular expressions if you need some really basic validation. But the validation rabbit hole goes as deep as you're willing to dig.
Different ways to use it
Front-end
As you know, the front-end is what the user sees and interacts with. That's why a good chunk of validation includes messages you show the user. It's also your first line of defense against bad form data. If you can do a check on the front-end, that's not a bad idea.
That way the back-end never gets touched before the data has been validated and that saves time. So you can focus on making those custom error messages so your users know what they need to fix. The worst thing you can do is not tell a user what's happening.
Form validation is as much about the user experience as security. Make it easy for the user to put in their data like you want them to and the vast majority of the time they will. If they don't then they'll get one of those easy to understand error messages.
Back-end
This is your final line of defense before the database. It doesn't hurt to do some extra validation before you make any database changes and sometimes you can only do this in the back-end. Plus, you might have some stronger tools to help handle the validation of your data.
Doing your validation on the back-end also makes it even more secure. No one can pop open the developer tools and dig through the code and figure out how to beat your validation.
In a time crunch it's tempting to come back and do form validation later. Go ahead and get it out of the way while you're working on the form. It'll save you some rework later on and it'll make your app look more polished when you show it to your boss or your clients.
Do you have any validation tips, stories, or observations? I do actually read the comments so I'd really like to hear what you think.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Top comments (3)
Check out my form validation library npmjs.com/package/js-formation . Haven't tried using it in a React/controlled components ecosystem yet but I'm eventually going to expand it to support more modern frontend programming practices. Take a look!
If the bots weren't so attracted to the mailto: links, I'd never use a form.
Otherwise yes, validation is important at every level.
sheesh, I just went through alot to sign up to say "bots? attracted to mailto:links? please divulge" I have come to realize there are many "bots" on popular IG pages, and I help promote music, and of course the more someone "comments" on a post the more that post is seen. So I guess my question is "is there a way to use mailto: links to drive comments on a pages post that is sponsoring your page to get more likes and comments by obvious bots?" If that makes sense.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.