Web form validation

October 26, 2017 10:43 am

Web form validation



There is nothing more frustrating than having the task of filling out a badly designed online form. With there now being around 3.2 billion of us using the internet around the world, it’s becoming a more common experience for us all.

Form validation is essential as it ensures that data stored about a user is in the correct format, and hopefully correct as well. As UXers we want to make form entry as smooth as possible, while also ensuring the data is valid.

In this article, we look at different validation techniques and how they affect the users’ experience.

Real time validation

This type of validation, which is often referred to as ‘Premature inline validation’ gives users live feedback about their data as they type it into the form. This can often leave users looking for errors that aren’t there, as the form will automatically start validating data as soon as the first letter or digit is entered. This method criticizes the user for mistakes they haven’t made and prompts them to look for errors before completing the data entry. Often leaving users confused and unsure how to move forward. This, combined with a lack of help features, which allows users to see what format they need to enter the data in or an example of required details, such as capital letters and numbers in passwords can often lead users being uncertain how to proceed.

An example of this can be seen below.

Real time validation

Although real time validation can cause problems for users, it is also important to point out that when this is applied in the correct way, it can provide assistance and help guide users to resolve any errors.

The example below shows real time validation applied to a password field. By giving users the opportunity to view how strong (or weak) their password is as they type it, combined with listed requirements, allows the user to complete this and make adjustments in real time with confidence that what they are entering is correct.

Real time validation with guidance for user

Examples of how the different levels of passwords strengths can be displayed can be seen below.

Real time validation of password strength

Inline validation

Inline validation does a pretty good job of guiding users through the form, allowing users to finish the field before presenting them with any error messaging. This allows users to enter their details without being interrupted or distracted by an error message, or misinforming them their data is incorrect before they have finished inputting it.

This method seems to be the most commonly used across the web, and although it appears to be the most user friendly in the sense that it does not distract users with error messages while they are typing, it can also cause some confusion.

Below are two examples on how to and how to not implement inline validation and error messaging. Firstly, a good example:

In line validation with flyout messaging

Clear messaging that appears after the user has finished typing and has clicked or tabbed out of the field. The flyout message is bold and points direct to the field the error message relates to.

Now for a poor example:

In line validation with confusing messages

Similiar to the example above, this form has no field labels but in this example the way the error messages are presented means it’s not clear which field the message relates to. If users are unsure which field the error message relates to, this can lead to users having to delete data in an attempt to try and see the field title again before being able to move forward successfully.

After submit validation

Although this method allows users to enter their details fully before presenting them with any validation messages, it also adds a step because users have to press the submit button before they can see if they have made any errors. This can make the process of completing a form more time consuming with only one error being shown at a time. The worst case being that users could have to re-enter their details and press submit several times to view the different error messages for different fields before they are successful in completing the form.

After submit validation

Having to select ‘Join now’ before being notified of any errors makes the users journey unnecessarily longwinded.  Although, by having field titles visible at all times, users are able to make changes without confusion about which field to edit.

To summarise, there is no one clear technique to use to make a web form easy to complete, but by combining features from the different validation methods shown above, you can provide users with a clear and simple form to help guide them through with ease.

The steps below are collated from each of the different validation techniques discussed within the article, and when combined, provide a clear and smooth process for users.

Steps you can follow

  1. Help users by following best practice by using field labels or keeping field titles visible at all times.
  2. Only use real time validation for complex formatted fields such as emails or passwords.
  3. When using real time validation, show users what they need to do to complete the field with valid data.
  4. Show inline validation error messages aligned with the field in error. This allows users to clearly see which fields the error message relates to.
  5. Provide users with help text, to help them understand what format or specific requirements are needed.

The wireframe below shows an example of how to implement the four steps to make a web form with easy to follow form validation.

Bringing it all together