Checking the Checkout Process: Field Validation
Un-optimised fields in your checkout create unnecessary friction which your customers will find difficult to use and engage with – particularly those preferring to enter details manually, rather than use autofill.
Types of Field Validation
Required Field Flags - The simplest form of field validation is the “required field” flag. This tells the person completing the form that their submission won’t be accepted if the field is empty. On its own it doesn’t verify that the response in any field is correct, only that a response was given, so it’s routinely combined with other kinds of validation.
Pattern-match validation - Pattern-match validation determines whether the answer in a field is formatted correctly, such as making sure that the response is a number and not a letter or that the submission is at least a certain number of characters long. Pattern-match validation is a good idea for required fields to make certain every phone number and email address is formatted correctly.
Server Side validation - Field validations can happen before or after the submit button is clicked and the form is submitted. The most common approach is server-side validation, where the form is verified after submission. An incorrect response frequently causes the page to reload with a warning and indicates which fields have incorrect values.
Server-side validation can be frustrating for survey respondents. It adds extra time to the process, but it’s easier to implement and allows for more powerful validation methods.
Client-side validation - In client-side validation, the person completing the form is alerted to a problem with their answer as soon as they complete a field, which is known as real-time validation.
Here are several tactics that can improve the validation of checkout fields, with the aim of reducing page abandonment.
1. Inline validation
Ensuring you style the entry field with a different colour as clients begin to enter their details is really helpful. It is best used on fields such as password or phone number field.
2. Do not be picky
Exactly how information is written into a field, means nothing to a customer so you need to ensure your fields are flexible and allow for lots of different options. For example people can write their phone number in many contrasting forms - with spaces, without spaces, country code enabled - none of which are incorrect so allowing for all these variants is important. If you really want a specific format to suit your backend systems - they you can create logic which does this automatically in the background.
3. Use ‘Did you mean?’ as much as possible
Spelling mistakes are really common when filling out fields, so using the ‘did you mean’ functionality to check where the user had entered info correctly is very useful. It helps the users and allows them to correct their info in a polite way but it is also helpful to the retailer. There is nothing worse than fulfilling orders with incorrect address info. It wastes everyone's time.
4. Luhn validation
The Luhn algorithm or Luhn formula, also known as the ‘modulus 10’ or ‘mod 10’ algorithm, named after its creator, IBM Scientist Hans Peter Luhn, is a simple checksum formula used to validate a variety of identification numbers, such as credit card numbers.
As credit card numbers are quite long they can occasionally be inputted incorrectly by the user - so the Luhn algorithm checks to see if the number is viable. Please note though - it only checks to see if the number is plausible and does not check the data inputted against the credit card processor.
5. Avoid in-field labels
In-context descriptions or hints can help clarify what goes inside each form field, and therefore improve completion and conversion rates. There are many ways to provide hints. A common implementation is by inserting instructions within form fields. Unfortunately, user testing continually shows that placeholders in form fields often hurt usability more than help it.
Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.
To find out in more detail about how to improve the overall flow for your checkout process - please see our ‘Expert Strategies to Boost Checkout Conversion’ whitepaper (updated for 2023). This includes key stats, platform comparisons and lots of top tips and advice on how to avoid basket abandonment.
Download further resources
How to Report on eCommerce Performance
This guide will tell you what KPIs to include on your performance report and how to measure your eCommerce strategy.
A Complete Guide to eCommerce Replatforming
How to drive growth by making the right move at the right time. This guide is designed to help you get it right, and realise commercial gains from replatforming, fast.
