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.

Validation methods

User’s input can be validated on the server and on the client (web browser). Thus we have server-side and client-side validation. We’ll discuss pros and cons of each.

Server-side validation

In the server-side validation, information is being sent to the server and validated using one of server-side languages. If the validation fails, the response is then sent back to the client, page that contains the web form is refreshed and a feedback is shown. This method is secure because it will work even if JavaScript is turned off in the browser and it can’t be easily bypassed by malicious users. On the other hand, users will have to fill in the information without getting a response until they submit the form. This results in a slow response from the server.

The exception is validation using Ajax. Ajax calls to the server can validate as you type and provide immediate feedback. Validation in this context refers to validating rules such as username availability. You can read more about validation with Ajax in this excellent tutorial on jQueryForDesigners.

This diagram shows differences between client-side and server-side validation and other techniques.

Client-side validation

Server-side validation is enough to have a successful and secure form validation. For better user experience, however, you might consider using client-side validation. This type of validation is done on the client using script languages such as JavaScript. By using script languages user’s input can be validated as they type. This means a more responsive, visually rich validation.

With client-side validation, form never gets submitted if validation fails. Validation is being handled in JavaScript methods that you create (or within frameworks/plugins) and users get immediate feedback if validation fails.

Main drawback of client-side validation is that it relies on JavaScript. If users turn JavaScript off, they can easily bypass the validation. This is why validation should always be implemented on both the client and server. By combining server-side and client-side methods we can get the best of the two: fast response, more secure validation and better user experience.

Rich, instant validation feedback is done on the client on TypePad

What to validate

There are several different types of validation you can perform: required fields, correct format and confirmation fields.

Required information

The first and most obvious information that should be validated is required information – information without which operation cannot be completed successfully. Thus, validation has to ensure that the user provided all the necessary details in the web form and it has to fail if at least one of the fields is not provided. Required fields should be clearly marked in order to inform users about what information has to be provided up front.

Required fields on Komodo Media blog comment form are marked with “required” help text.

A common way to mark required fields is with an asterisk (*). However, not all users know the meaning of an asterisk sign. Beginners or older users are very likely to have only a general idea of what an asterisk might mean. This is the reason why it is a good practice to either put a note on the top of the form that indicates that all fields marked with an asterisk are required or to use required field markers. In case that all fields are required there is no need to place asterisks or markers in the form. A simple message that all fields are required is enough.

Facebook doesn’t provide information about required fields. Users get information that all fields are required only after they press the “submit”-button.

See survey on Web form design. According to that survey “designers tend to remove all unnecessary details and distractions which don’t help the user to complete the form”. More detailed analysis showed a trend of using very few mandatory fields – more than 50% of forms used at most 5 mandatory fields, while optional fields were often avoided. This can be useful to you when deciding on required fields.

Correct format

Apart from ensuring that users provide necessary information, validation has to ensure that users provide information in the correct format. This applies to various cases such as email address, URL, dates, phone numbers and others. If the information is not in the correct format, users should be informed and correct format should be suggested. Probably the easiest way to validate the “correct” formatting is to use regular expressions.

Please notice that it is often a good idea to not impose a strict input pattern on the users; it’s better to actually permit users to enter text in a variety of formats and syntaxes, and make the application interpret it intelligently. The user just wants to get something done, not think about “correct” formats and complex UIs. Let the user type whatever he needs, and if it’s reasonable, make the software do the right thing with it. This design pattern is also often called forgiving format UI design pattern.

Carbonmade sign-up form validates URL format, informs the user about the error and provides ways to correct it.

To learn more about regular expressions be sure to read Essential Guide To Regular Expressions: Tools and Tutorials or if you already know the basics: Crucial Concepts Behind Advanced Regular Expressions.

Confirmation fields

When dealing with data that is important to the system, it is a good practice to let the users confirm their input using additional confirmation fields. This way users can be certain that they provided correct information. A typical case when confirmation field is used is for passwords, but it can be used in other cases like an email address.

Photobucket sign-up form required users to re-type password they previously entered in order to ensure it has been correctly entered.

A confirmation field should be placed next (or below) the target field. It has to clearly describe the purpose of the field such as “Confirm your password”. If two values do not match, the user should be informed. As an option, you can use a success indicator if values DO match.

The second part of our survey shows interesting information about confirmation fields. Email confirmation was mandatory in only 18% of sites, while password confirmation was mandatory in 72% of web sites. Surprisingly, large websites such as Facebook, LinkedIn, Stumbleupon and Twitter don’t require password confirmation.