Zuko Blog

Inline Validation in Online Forms - Should You Use It?

Ever wondered whether inline validation can improve the conversion of your web forms?

Forms are the gateway to an online business, wrestling some of your personal information from you. For this to happen smoothly, this data has to be formatted in a way that allows the company to provide you with the good or service you want. Asking for a delivery to an address written only in numbers probably won’t work. Entering an email address without a domain will not allow you to be contacted.

It is in the interests of an online company for users to submit a form correctly, ideally getting everything right first time. To ensure that data is provided in a way the online business can use and understand, the form usually validates your data. This validation can happen in two ways:

Client-side validation - the validation of the user input happens within the users’ browser, and is done via AJAX, HTML5, Javascript is similar language

Server-side validation - the data is sent to a server, which validates the data and sends a response. Languages used might be C# or .NET.

Client side validation is usually quicker, since data is not being sent anywhere. It can be used as a way to ensure data is at least correctly formatted before sending this away for further validation and checks.

For example if you were checking your eligibility for a credit card in a form, the client side validation would warn you if your email address was incorrectly formatted (test@test would be marked as invalid) and the server side validation might inform you that you already have that email address registered with the checking service.

The simplest way to think about inline validation is that it happens as the user goes, delivering feedback as soon as a mistake is made, rather than in a group at the point where a user tries to submit the form. 

To understand whether inline validation could improve your form conversion get started with a Zuko free trial or demo.

The benefits of inline validation

Without inline validation as part of your form design, a user can make their way through a form, making errors aplenty without realising until they try to submit a form:

In the above example, the email addresses are neither valid nor match, but a user only know about this when they try to progress to the next step. Given that they may have made many errors during their first attempt, they may receive many error messages at the same time, and potentially be overwhelmed.

Now over a decade old, this classic List Apart article by Luke W was a major influence on people’s attitudes towards inline validation. In the study conducted, they found that when completing a form with inline validation, participants saw

In May 2017, we asked 117 consumers the following two questions:

In short, inline validation is an effort on behalf of the form to help users correct information as they go, ideally so that when the point comes to submit the form, they are more likely to submit it on the first attempt. The more failed attempts a user makes to submit the form, the more likely they are to give up.

Sounds like a good move then, but there’s plenty of nuance in how to do inline validation well, and when it can be used at all.

For example:

For more information on how to improve form performance, check out Zuko's Big Guide to Form Optimisation and Analytics - Section 2

When should you use inline validation?

Inline validation can be used effectively to help users correct certain types of errors, but not all. You cannot for example stop customers entering a perfectly formatted, but incorrect email address or phone number. However it can be used to to help

When it is less likely to be used:

Where is shouldn’t be used

Positive and Negative Feedback

Should you offer just the stick, or the carrot too? Inline validation can be used both to flag errors, and gives a digital thumbs up when data looks formatted correctly.

Validation on error

When a user makes a mistake in a field, and then a message is shown to them:

Validation on success and error

When a user successfully completes a field then they are notified visually, and when they make a mistake in the field then a message is shown to them

Whilst the above seems like a nice, positive reinforcement, it does carry with it risks. For example if my email address is tom@formisimo.com but I enter tom@formsioo.com by accident, a green tick appearing would give me the impression that my email address is ‘correct’. It is not - it is merely formatted correctly, but is not my email address. I might be less tempted to check over my entry if I’ve already been visually prompted that all looks well.

Sticking to the errors-only approach doesn’t fall into this trap - red flags are only raised in cases of formatting issues, but there’s not visual cue that my entries are ‘correct’. 

It’s not an issue with a clear winner - in cases like this we’d always recommend testing different approaches and letting the data lead your decision making.

When should you display errors?

The most common and consistent way to display error messages is at the point that a user focusses out of an input into the next one. Before this point, you cannot be sure that a user has finished entering their data. If you try to correct too early, you may end up falsely telling a user they have made a mistake.

Should you let errors linger?

So you’ve displayed an inline error message - what next? A user notices their mistake, and refocusses back into the field in order to correct it. You have two options in terms of what to do next:

  1. Continue to display the error until a user focusses out again, and the formatting error is gone:

  1. Remove the error upon refocussing, and only display it again if the user exits the field a second time and there is still an error:

Each of these approaches have pros and cons:

Which approach works for you will no doubt be as a result of testing, and examination of the data.

A final word

Inline validation can help users correct incorrectly formatted data as they progress through the form, hopefully resulting in less attempts to submit the form for a final time. However it should not be used as a bandage, as your ultimate goal should be to try and help users avoid mistakes in the first place, especially if their ‘mistakes’ are simply a result of your form being unnecessarily inflexible in the data it accepts.

For instance, having inline validation on a phone number field is great, but if you are displaying a lot of errors telling users their number is invalid when a user tries to add spaces between numbers, maybe inline validation is not the answer. You should instead look to allow user to enter their data how they want to, and do the hard work yourself in accepting in.

Once you’ve chosen to add inline validation, it does not end there. You should be looking to continuously optimise and improve the delivery and content of these messages. Error messages in themselves are difficult to get right, regardless of the time at which they are displayed.

Looking to improve your form conversion?

Submit your form to get a free health check showing you:
  • Likely friction points leading to abandonment
  • Form elements contributing positively
  • Other areas for UX improvement
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

We wrote the book on form optimization!

"The best book on form design ever written - 80 pages of PURE GOLD"
Craig Sullivan, CEO, Optimise or Die
(No email needed)

More from our blog:

Failed Form Submissions: Optimizing the Submit Button UX
Why failed submissions happen and how to reduce them
Optimizing the phone number field on forms
UX tips to reduce abandonment on mobile and landline form questions
Form UX Design Tips: Best Practice Examples
10 form design patterns that help optimize conversion
8 Tips to optimize your mobile form UX
CRO advice for forms on mobile devices

Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.

zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io