Dev Best Practice (and common sense)

The Good, the bad and the ugly a web form validation.

It’s happened to everyone at least once, more than once, many times. It’s happened to you if you like online shopping if you have to fill up an online form, make a claim, if you ask questions… Welcome to the world of painful form validation!

Just think: you don’t need to attract those people to your website, you don’t need to pay for the marketing campaign or write your name in the sky with an airplane to get them to your website – you did it, all those people are already your customers. They came to your website to fill in their contact details or pay for an order, they came to PAY YOU MONEY. And they all will walk away to never come back. The only reason for this is your ugly web form validation.

Do you know how many online sellers didn’t let me pay for a service or product? My absolute champion is the website selling subscriptions to magazines, the only one in Australia. That’s why I had to come back 5(!) times to fill in the form. Did I have another option? No, I just needed it, it was a Father’s Day present from my kids to their dad, so I had to fight to the end.

If you don’t know why you need that form validation, don’t put it on the form. If you know for sure you need it, think twice. What are you getting in a worst case scenario? How many “broken” records do you expect to receive?  Could you compare it to the number of customers walking away?  Can you fix it at the backend, can you do some smart coding to avoid it? If yes, then do it!

Don’t stop people from submitting a form. If you need to say something, display a WARNING. Give people some options to correct, then let them submit that form, already.

Another way to be user-friendly is to notify users about your expectations. If you expect this field to be mandatory, why this remains a secret to a user till the end. Boom! “Invalid format”! What’s the valid format, again? If you hate masked fields, display some friendly format suggestion: “Please enter your 7 digits code in a format xx-xxx-xx”. Make your customer happy, it doesn’t cost much.

The great and effective way to validate address is to use some address validation add-ons. There are some for CRM as well, Google it. It helps a lot, you don’t need to clean up data after, you just get it right before. It’s good for you, it’s good for users.

The ugliest among all ugly validations – a phone number validation. Well, I understand the complexity of the task: too many countries, formats, variations – landlines, mobiles. Then, too bad – don’t validate it at all! I don’t believe in phone number validation, it’s evil. What have I done to you so you do this to me? Why do you “phone-validate” my contact details to stop me from giving away my money? I tried to give it to you, but you said: “NO! I don’t need your money! All I need is to get your phone number my way.” No hints, no tips, just one red “Invalid format” message. “OK, OK, you won and I lost. And I am walking away with my money”

Have you ever tried a Google Chrome auto-population for the form fields? Recently, I tried it with one of the university course enrollment forms. And I failed again. It’s complained, that my Australian phone number was in a wrong format. The Australian web form on the Australian website didn’t recognize the Australian phone number format from my cookies. I need the T-shirt saying “I failed a web form validation. Again.”

I am a web developer myself, so I am guilty too, I admit it. But if I need to sell something online, one day, I will remember to tell this myself: “If you sell products or services, if you have a website with any types of forms to pay, talk or register, don’t stop your customers from giving you their details or money, or information. Let them make their mistakes or put a bit more effort to transform your form validation from the ugly into the good.”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s