UX Tip #14: Avoid early real-time validation for forms as it harms usability
Real-time validation can cause usability issues when it's done pre-emptively
Pro tip: When using real-time validation, do it after the user has focused on another field.
Real-time validation is a commonly used practice for form UX: it can create a dynamic, instant-feedback experience that provides clarity to users. However, it doesn't always work as planned, and may cause even more frustration than expected if it's not done at the right time.
What's the problem?
Many real-time validation frameworks and libraries begin validating a field as soon as a user focuses or starts typing on a field.
This inevitably leads to frustration as well as a feeling that the user did something wrong. After all, if the user hasn't finished their input, why would we assume it's wrong?
What to do instead?
A field should be automatically validated either:
Once the user has moved on to another field, also known as late validation
Once the user has typed a specific number or pattern of characters
In most cases, the safest and easiest approach is to validate a form field right after a user has focused on a different field, or has clicked/tapped anywhere else on the screen.
Are there any exceptions?
There are some cases where strict, early validation may prevent unnecessary mistakes, and that's usually when a form field requires input of a very specific format.
A good example, as presented by Smashing Magazine, is that of an IBAN input: When expecting a strict format, e.g., starting with a letter identifier followed by a set of numbers, it's sometimes worth signaling to the user that they are typing the wrong value even before they have finished.
Summary
Avoid early, real-time validation, which may create unnecessary errors and confusion.
If you use real-time validation, do it after your user has focused on another field or elsewhere on a screen.
In cases where a strict format is required at the beginning of a field, it might be worth validating early to prevent mistakes.
Further reading
https://www.smashingmagazine.com/2022/09/inline-validation-web-forms-ux/