Input
Validation
Input field is a component that encounters the most amount of user errors. To help avoid users from making repeated errors on inputs, it’s important to consider to:
- Write a helpful placeholder example.
- Use a helper text after the user has made an error.
- Highlight the input field box with a distinctive colour (typically red).
- Write a helpful error message that communicate to the user on how to fix the error.
- Dynamic validation - First validation happens only on blur, and validates on keyup once an error exists.
Dynamic validation
Typically, the behaviour of these error validations are shown after the user has interacted with a field. In some cases, a helper text is shown before the interaction occurs, to clear any confusion. For example, some countries use (MM/DD/YYYY) format while other countries use (DD/MM/YYYY) format.
Error
If an input requires validation from the back-end to check if the user’s details are correct, display an error message for the user to re-enter to avoid the user having to search through the whole form to find the invalid input.
Errors on sign up and log-in flow
Recently, Freelancer.com has introduced a series of validation messages through different stages of the validation behaviour to improve the experience of correcting an error on the sign up and log-in flow.
The validation is shown in three stages:
Error: The error message is shown after the user has entered the wrong input.
Warning: After the user sees the error and goes to correct their input, an orange helper message is shown to guide the user how to fix the error.
Success: When the user enters the right input format, the field is highlighted in green.