Building better web forms: Validation best practices
Validation is a very important aspect in web forms development and should be planned carefully. Well designed validation can favorably affect the user experience and can speed up the filling of forms. Poor validation can make considerable damage to the system and user experience. Not having any kind of validation is out of the question.
Another important thing that should be clear is that validation relates exclusively to user input. Messages that come from underlying layers, whether they’re exception messages or any other, are NOT validation messages.
Validation can be implemented in many ways. We’ll consider different options that you have when creating validation and we’ll take a look at some examples.
Alert user upon submit
The “classic” validation process looks like this: user fills the form, presses submit button and gets notified if validation fails. However, informing user about required fields AFTER they have already filled the form is not a happy solution. Why let the user figure out which field is required or which format they should use for a phone number?
Yahoo Mail signup form detail – which fields are mandatory?
The article Rock Solid Form Validation With xHTML, CSS and jQuery provides a good explanation on how this can be done using jQuery. Be sure to check out LinkedIn signup form. Beside field validators, they inform a user with a message box on the top of the form. Be sure to check out my previous article CSS Message Boxes for different message types that explains the importance of alerting users in a proper way.
Mark required fields
The least you can do is mark required fields with an asterisk (*). This way, users will know exactly what fields have to be filled. A good practice is to put a note on the top of the form that indicates that all fields marked with an asterisk are required. Not all users know what asterisk means. Instead of an asterisk you can make required field labels bold or color them differently. Personally, I prefer an asterisk.
Comment form on jankoatwarpspeed.com – which fields are mandatory here?
The only exception would be if all fields are required. There is really no need to place asterisks on all fields. Just imagine what would it look like. In this case placing a note on the top of the form that all fields are required is enough.
Live validation and dynamic tips
Ok, now we know what to do with required fields. But what about field format? What about validating email address, URL or phone number format? Nice way to solve this problem is to provide tips on web forms. A tip can provide additional information about field that has focus.
Excellent example is Digg.com signup form. Although Yahoo Mail signup form has similar feature, I think Digg.com has a better implementation.
Digg.com – a good example of dynamic tips
Another interesting example is Mixx.com signup form.
Mixx.com – visually enhanced tips
You can be very creative when making dynamic validation. Some interesting examples are Live Validation, Using Ajax to Validate Forms and my latest article on Design Shack Creating a Digg style sign up form.
How to present validation errors to the user?
When users eventually press submit button and validation fails, you have to inform them about validation errors.
- One of the possibilities is to show validation message summary at the top of the form. ASP.NET has built-in ValidationSummary control for this.
- You can also change the color of labels where validation failed. A good example for both solutions can be found here: Jquery form validator, because form validation is a bi***
- You can add an asterisk to the right of a non-validated field.
- You can add a message to the right of a field i.e. – “Required”
Whatever your choice may be, try to be clear and informative. Validation shouldn’t confuse users but rather help them.
Client or server validation?
So far we were talking about client side validation and how it can be improved. But imagine the scenario in which JavaScript is being turned off. No doubt this might affect the application dramatically. This is one of the reasons why you should always have a server side validation as support to the client side validation. Server side validation cannot be switched off and will successfully perform no matter what you do on the client.
That means – use them both!
Summary
Here is the summary of what you should always think of when creating form validation.
- Mark required fields with an asterisk
- Add tips to form fields
- Always, always, always implement both client and server validation
How do you implement validation? On submit or on blur? Client or server? What is your best practice?
* * *
Remember RSS? You can subscribe to my blog here.
6 Comments
For clientside, I ussually do onChange. Then sever side for the entire thing and display in an error block at the top of the page.
It’s a good idea also to set the focus after a postback to the field where validation fails (or the first field it fails in the case of multiple errors). Not nessassary, but nice for the user, expecially if your page requires scrolling.
And if you’re going to impliment required fields, make sure they work. I’ve seen a number of pages that say I must enter a certain field and I do, but it fails validation when I try to submit anyways. I don’t typically come back to those sites.
Great point about using both Client & Server Validation. I think a lot of people think this is an option, either or…Not quite. Why make the server work on something the browser can? And, if things make it by the client side, why give the server some bogus data?
Nice post!
Kris, yeah, I completely forgot about focusing field(s). Thanks!
Matt, right. Although many a lot of them read about fancy jQuery tips or whatever, they just don’t understand the importance of a good validation.
Any new validations to stop pesky spammers that use names like "gghkhggh"
Somebody seems to find it funny and worth their time to use a contact form on website to send email like this through our forms.
First Name: gjhkgjh
Last Name: fhdfjdgfh
Address 555 Ffhgfgh Rd.
etc..
I was thinking doing a Google search for names and dumping them all in a validation check list.
A lot of good that would do though ..since they could just use random names. I have the IP of course, but the problem is they have mad Ripe accounts. A spammer tha tI’ve been collecting IPs on ..now has around 20 IP accounts at RIPE and basically a spyop wannabe’s clean proxy list.
I hate to do it, but I’m thinking the only way to slow them down may be to use IP identification from a known list alreayd collected.. and then perhaps a taste of their own medicine in fast moving scripts and Ajax so they dont see page reloading while they’re deviantly filling out those form boxes :) Infect all files and folders on their cpu by replacing all text characters with random text generator to give them back = "gjhfghfgh djfjgdsjf" etc..
Its very tempting anyway.
I always use server side validation – I never use the .net validation controls! I tried it once and it just wasn’t flexible enough. I always use something like Dim errror As Boolean = False within my button click sub and then check the fields in the form I want to validate, if one contains an error, then the flag gets set to true and my error label gets added to. When the error flag remains true I call my save routine
Nice web site you have here
for my side I always use client and sever side validation and display summary message on top of my forms also I use server side validation for complex matters using ajax which make it more better instead writing same validation functionality twice.