Inline validation helps users to input correct information while submitting a form. Ideally, all validation should be inline and in real-time: that is, as soon as the user has finished filling in a field, an indicator should appear nearby if the field contains an error.
Key guidelines for inline validation
Validation types
Use eager of aggressive validation, based on the specific use case (examples will follow).
Color
Mark the field that failed validation in red. To assist color-blind users, add an icon to the left of the validation message.
Message
Validating limited character length
Validation mode: Aggressive
If you know the input character length, instantly validate the field by counting the characters. This avoids unpleasant surprises for the users.
Validating predictable formats
Validation mode: Eager
Validating empty fields
Validation mode: None
Don't apply inline validation on empty fields. Why? Inline validation applies to any value entered in a field, and empty fields have no value.
So, don't validate when:
Validating free text fields
Validation mode: None
Do not use inline validation on free text fields.
Validating password creation and recovery fields
Validation mode: Aggressive
Validating matching field input
Validation mode: Eager
How to validate interdependent fields, such as email and password confirmations?
Validating fields with database verification
Validation mode: Eager (if possible)
Sources