Validation is the process that checks whether what you’ve entered into a form is correct and displays the appropriate feedback.
It's often overlooked because it’s not immediately visible on the page, yet poorly designed validation is a major cause of frustration for users and at its worst will lead to complete abandonment of your form.
On the flip-side, well designed validation that includes positive feedback when fields are entered correctly guides and gives confidence to the user.
Validate as you go
How many times have you worked diligently through a form only to be told at the very end when you submit that there were errors. You are then left with the task of going back through the form to amend them – painful? We've all been there.
As research shows, it is best practice to validate form fields as they are entered and show immediate feedback to the user, so they can make corrections while still in context.
If a specific format is required and the user has made a mistake, ensure the validation messages tell them exactly what is expected, not just "there was an error". Examples are: a requirement for set number of digits in the case of a credit card number, or a specific prefix for local phone numbers.
Keep it close
Validation messages need to be in close proximity to the fields they relate to. Highlighting the field in the same colour or style as the validation message is a further visual clue. Make it immediately obvious so users don't need to join the dots.
Use Positive feedback
Positive confirmation messages when fields are entered correctly assures users that things are going smoothly and offers a small sense of achievement.
Just be careful not to overdo it. These messages shouldn't detract too much from the ultimate goal of completing the form.
Remove the burden altogether from users by using helpers like date pickers, and address lookup fields. This not only makes it easier and faster for the user to enter but it also ensures the data is validated at the same time.
Forms are designed to be interacted with, not just looked at. And a key part of that interaction is ensuring what has been entered is correct and valid. Therefore it's a good idea to plan for validation and work it into your designs right from the beginning.
Read more articles in this series;
Love your online form – 1. validation design is critical