Keep the input in default state
The text field should be checked for errors only after the information has been entered.
Allow user to enter information
Let the user type without interruptions and submit the information aka don't assess as changes are made.
Signal error after loss of focus
After the input has lost focus (user has clicked another element), the field should be assessed. Looks like we have an error here!
In this case, explain why the error happened, and what is required to resolve it. For accessibility, combine the text with a visual icon that indicates an error was found.
Return to default state upon reattempt
Once the user focuses on the field again, the error message should disappear. If there is an error again, the process will simply repeat until they are able to continue.
When To Show Error Messages
A walkthrough of the timing and position of validating inputs, and how to show when it's wrong.
How to Report Errors in Forms: 10 Design Guidelines
A list of minor but meaningful values to convey an error to be easily understood by users.
How To Write Good Error Messages
A look at what to consider when informing a user something has gone wrong, and how to help them.
