Web Form Validation: Best Practices and Tutorials

Ideally, users will fill the web form with necessary information and finish their job successfully. However, people often make mistakes. This is where web form validation comes into play. The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. In this article we will go beyond the validation itself and explore different validation and error feedback techniques, methods and approaches.

Are you human?

Web form validation wouldn’t be complete without mentioning Captcha. Captcha is a significant part of validation as it is responsible for finding out if the user of a system is a human or a bot. In its simplest form, captcha consists of an image showing text, numbers or an expression and a field that expects content of the image as input. The earliest captcha generated images with numbers (e.g. “8356″) and that number was expected to be entered by the user. If correct number wasn’t entered (or not entered at all), the form couldn’t be submitted. In fact, today most spam bots are able to recognize the text embedded in a simple captcha-image, so it’s a good idea to pose some question that only humans could answer correctly, e.g. “What color does the Sun have?” with correct answer “yellow” in all its variations (”YELLOW”, “yellow”, “Yellow” etc.).

You may also want to consider the technique called Honeypot Captcha where the idea is to create hidden form elements and check on the server side that they remain blank. Another option is to create a form field with a label that says, “Leave this field blank” and then is marked as a required field (thank you, Shawn McCool).

Captcha implementation
Simple captcha requires an answer to a semantic question.

The kind of captcha presented above caused a major problem in accessibility. Blind, visually impaired or dyslexic users have difficulties or are even impossible to complete the web form with Captchas. As the Web evolved, so did captchas and today there are implementations like ReCaptcha that have audio support for users with disabilities.

Recaptcha component
Captchas can show hardly recognizable words. Can you easily read the word on the left?

Still most users hate captchas (and there is a good reason for hating them!). Of course, people just don’t like filling in forms. If they can’t do it fast and effortlessly, there is a high probability that they won’t do it at all. This is where a captcha doesn’t help at all: it can take too much time for users to read (if text is messy) which happens oft in practice. Remember, Captcha helps site owners, not their users. Therefore it’s always a good idea to avoid using Captchas if you can avoid them. To read more about Captchas and accessibility, read Inaccessibility of CAPTCHA.

>Captcha on Digg registration form
Captcha on Digg registration form has audio support. If unable to read, users will be able to hear the letters shown in the image.

Useful resources

Here are some of the frameworks, plugins and tutorials that might help you easily implement validation in your forms.

Conclusion

You saw different methods and techniques that you can use to implement validation in your forms. Although there are many possibilities, you should carefully plan validation for each project. Not all techniques provide a solution for everything. Some of them are very helpful and easy to implement, but some lack usability and simplicity. If you are new to web form design here is a short list of what to consider in Web form validation design). That might be enough for you to start.

Rules of thumbs in web form validation design

  • Never omit server-side validation.
  • Don’t provide confusing validation feedback. It should clearly communicate the errors and ways to fix them.
  • Don’t let users think about what information is required, always clearly mark required fields.
  • Never provide validation feedback on a single page or in a popup alert.
  • Don’t use dynamic effects as compensation for a badly designed form. Fancy effects won’t hide a poorly designed web form.
  • If you use Captcha, don’t forget to provide audio support and enable users to “reload” the Captcha.
  • Don’t forget to inform users when the form was completed successfully. It is as important as a good validation feedback.