Inline Validation in Online Forms

What is inline validation

Baymard Institute provides a good explanation. According to them “Live inline validation” is where the validity of the user's inputs are checked live as the user progresses through the form, as opposed to checking the inputs in a lump sum when the user submits the form”.

There are 2 types of inline validation: Negative and positive.
The negative validation is usually displayed in a red color, and it tells the user if the field has been entered incorrectly. For example, when someone enters an alphabet letter in a numeric field. Or when someone forgets to fill in a mandatory field.
The positive validation is usually displayed in a green color, and its purpose is to tell the user that the field has been entered correctly. This gives the user an indication that he can move on to the other fields.

Why use it?

When people fill in a form they sometimes make mistakes, and that’s ok, however, if they find out about it only after they press on the “submit” button it may cause some confusion and frustration. This is mostly true in long forms, where the user needs to scroll and look for the mistakes he has made in order to correct them. This kind of validation tires the user and aggravates him - and we don’t want our form fillers aggravated, do we? This could lead to form abandonment.
By using inline validation you keep the form filler “in the loop” the whole time he’s filling in the form. It is like you are actually there with him, helping him along. Releasing unwanted stress and making way for swift form filling.

Luke Wroblewski wrote about an inline validation test he conducted with a usability firm. The test consisted of 22 average users on six variations of a typical web registration form. They used five versions of different inline validation methods and one version that activated the validation once the form was submitted.

His conclusions showed that their participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation. He says “Eye-tracking also showed that they “fixated” on the forms with inline validation less frequently and for less time, which shows that they found these forms easier to process visually than the forms without inline validation. This was likely because they didn’t have to reread the entire form after submitting it to resolve any errors—instead, they resolved errors as they went along.”

Are there any disadvantages to inline validation?

Like any other issue, the inline validation has its pros and cons. And though there are many supporters there are also people who think it is not so recommended.
Adam Silver, for example, wrote a post about this called “Inline validation is problematic”. He claims that even though the theory is that it’s easier to fix errors as soon as they occur, he finds that, for example:
- an error that appears and disappears respectively causes the page to judder
- inline validation breaks the user’s flow
-Many users look at the keyboard as opposed to their screen when typing. In this case, users won’t see the error until later or at all.

And so he recommends using an “Errors-only approach”, which means not using positive validation. As well as making sure fields are well-understood with clear guidance.

Statistics on inline validation and conversion rate

You can find many indications of inline validation influence on online forms conversion rate.
A good example is the user testing study we mentioned before by Etre and Luke Wroblewski. They found that inline validation had astounding results:
22% increase in success rates (which means that 22% less abandoned the form)
22% decrease in errors made
31% increase in satisfaction rating
42% decrease in completion times
47% decrease in the number of eye fixations (easier to visually process)

 
So to sum this up you might say that inline validation has its faults, especially if it's executed purely. however, it is undeniably productive in terms of improving your form conversion.

Tips for validation

1- keep your error validation messages positive. Nobody likes to be corrected so make it sound like encouragement rather than criticism. Read more about how to make your error messages friendlier.

2- use a Clean Look and a Clear Purpose.
Keep your design clean, with no redundant text that creates clutter. Use only short text labels for instructions or even tooltips.
In addition, make the message as clear and specific as possible so it is actually helpful. For example, be sure to mention what input field the error relates to.

3- Using Icons and Visual cues. Simple icons, like a green checkmark for success, or a red X for an error usually work best.

How does this work in FormTitan?

FormTitan fully supports the inline validation functionality. When you create a new form it already includes positive and negative inline validations. In FormTita they are called: Error and Valid Indicators.
These validations appear by default under the input elements when a field is entered correctly, or incorrectly.
There are cases, however, where your form does not necessarily require inline validations, or you may decide you just don't want to use them at all. This is fully customizable and you can turn off
both validations, or only one, if you wish.

Read how to use our valid/error indicators