When using either callback, promise or remote validator, your validation logic might take time. For instance, the remote validator connects to the server side and executes a few of database queries to check whether or not the field is valid. These kind of process could force the user to wait for a busy processing. User even don't have idea about what is happening.
This example introduces two ways to get user notified while the validation is being processed. It enhances the user experience of the application.
Setting validating icon
The first and most simple way is using a loading icon. It can be set via the icon option:
The icon.validating icon then is shown up when the field is being validated.
In the following table, you can find the icon provided by supported frameworks:
When the plugin starts validating field, it triggers the status.field.fv event:
By listening this event, we can do whatever we want to inform user about the validation process. To make it simple, I am going to use the Bootstrap progress bar component which is shown right after the validation begins its job. It is also hidden when the validation process completes.
In this case, I assume that you're using the Bootstrap framework. Of course, you can use other progress bar component provided by the Foundation, Semantic UI or UIKit frameworks.
The form markup:
The screenshot below demonstrates how it looks:
Look at this section if you want to add a custom class to the field container while validating it