Good validation keeps the user informed and provides help and encouragement to ensure the form is completed correctly.
Errors should be reported early to the user to avoid frustration. They should not be able to progress through an entire form and only be notified of invalid fields on submission.
Equally important to remember is that real-time validation should also be avoided. This can cause unease in the user as they are potentially told that they are wrong before completing their task.
Validation Colors
Validated fields must stand out when a user is scanning through the form. A brighter color helps the user identify the validated field.
Validation Icons
Icons help to quickly identify the type of validation before reading is required.
Validation messages
Messages should offer clear and simple information to the user. This is particularly important with errors where the message should offer advice to fix the error.
A successful message can also be encouraging to the user. However, be careful not to use this too much as it can potentially become meaningless.
Placement & Spacing
Use 4px margin below the input container.
Place the validation icon and message below the input container.
The icon, validation message and character limit (if the limit is present) should be placed in a row with an 8px space between each.
If the character limit is longer the width of the validation message must shrink to fit.
Alignment
Align the validation icon to the left of the input container.
The validation message and character limit should be aligned to the top of the icon with 4px padding at the top.
As the validation message increases in the number of lines, the icon and character limit should remain aligned to the top (minus 4px padding for limit).