Form validation best practices

A case study of how to get it right

Firstly, what is form validation

Our problem


The array of different validation stylings prior to our rethink on

Display at the right place


“Always display validation within the context of the action”

To the side of the input

Twitters excellent instant validation on right hand side of inputs
Obviously aligning validation to the right of the field can’t be used on mobile anyway
Example of a generic uSwitch form. Note the limited space for validation immediately to the right of inputs

Below inputs

The google approach of validation b0elow the inputs

Within tool tips

Vimeos use of tooltips for validation
Example of Facebook tooltip validation hiding surrounding information. Note how all error messages aren’t displayed at once due to this problem

Above the label

Example on of above the field validation

Below the label above the input

Example of this potentially confusing position

The best position for validation

uSwitch application

Our eventual positioning of validation site wide

Display at the right time


The right time to inform about the success/failure of provided data is right after the user has submitted the information

Instant validation should only be used for complicated questions.


After example (but with tooltip) From Google


During example on uSwitch

Before and during

Before and during (But with a more reassuring before message) From Twitter

uSwitch application

Example of use of instant validation being used only in definable sections. Most likely at the end of forms
Examples of micro validations that notify the user before submitting but don’t overwhelm

Use the right colour (and the right icons)


Uswitch application

Difference in our positioning and colour of validation messages before and after

Use clear language


Examples of unclear and he unhelpful validation messages. From

uSwitch application

Example of informative and helpful language being deployed at uSwitch. Requirements are clear and present up front. Help text is always displayed. And error message is concise, exact and avoids negative tone.

Universal integration

The 10 rules of form validation

The Creative Agency for your next big thing (run by Andrew Burton)

The Creative Agency for your next big thing (run by Andrew Burton)