What is Inline Validation?

A comprehensive guide to using Inline Validation

Created by Al Mackin
Inline validation is a feature used within a webform that delivers messages to the user based on whether the information they enter is correct or incorrect

Typically a form will have inline validation on errors, where the user is presented with an error message when they exit (or blur) out of a field. Inline messages are shown close to each field, for example above, below or to the side of the field

The primary aim of using inline validation is to make the user aware of issues as they move through the form, so they can correct them before the submit the form. This is a more interactive, and user-friendly, process than the original method of displaying error messages in one batch, after submission.

A further recommendation is to use inline validation to show the user that they have entered information correctly. Whereas an error will often require a message to be shown, and this message guides the user on what they need to correct, a notification of entering the correct data can be a simple tick box, or a green border around the field itself.

Inline validation comes in two types:


The definition of Inline Validation:
Inline Validation is a process of checking user inputs in form fields as the user moves between the fields. Inline validation includes functionality to show messages, or indicators, to users based on whether their inputs were correct or incorrect.

Why should I include Inline Validation in my forms?

The original method for displaying errors in forms was to allow the user to input data, then submit the form, then the errors would be shown in one batch. In some cases, this gave the user a number of errors to correct, and the process of correcting the mistakes would feel significant to a user. This increased the chance that a user would give up (drop off) and the conversion rate across all users would drop.

Inline Validation helps reduce the perceived effort required by alerting the user to issues as they move through the process. An example is a telephone number field that has inline validation to check the formatting of the phone number. If the user mistypes their contact number, by missing a digit off, or by entering the information incorrectly, then a message next to the field will alert them to the mistake.

“Use inline form validation with tick marks to show users their input is valid. This is a form of positive reinforcement rather than just using red X’s. This also prevents the situation where a form has been submitted with incorrect details only to be reloaded again for the user to correct their mistakes. Help them get it right the first time”

Manuel da Costa, Founder, Digital Tonic
Source: 8 form optimisation tips from experts

How do I deploy inline validation?

The functionality behind inline validation will contain rules that match the validation that takes place on form submission. There are no standalone providers for inline validation, so the solution is nearly always created by an internal development team.

The time to build an inline validation solution varies, but a typical build process for a short form would be one day for design and UX, two days for build and half a day for testing.

Is Inline validation worth it?

Calculating the potential impact of inline validation is based on two factors: what is the cost to develop and deploy this feature, and what is the expected return.

The impact of moving from no inline validation to validating within the fields is significant, and you are likely to see a strong increase in form conversion rates. If you have inline validation "on error" in place, and you're planning to launch validation on success then the uplift will likely be smaller. On high volume sites that uplift may well result in a good increase in income.

If I launch inline validation, how can I measure its success?

The KPI for any change to a form is the conversion rate, however focusing on a single metric may blind you to further optimisation opportunities. If inline validation is launched on a form, there may be five to ten additional touch points and messages to the customer.

Having a deeper understanding of user behaviour in your form will allow you to see how the inline validation messages impact on the UX. Using a platform like Formisimo will allow you to see 59 new metrics on form behaviour, and the following will be useful to determine the success of inline validation:

Further Reading

Is inline validation worth it?
Evolving E-commerce (Testing no validation vs inline)
5 form improvements to prevent drop-out

Users of Formisimo include...