Getting notified while field is being validated

When using either callback, promise or remote validator 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 displays a progress bar when the validation is being processed. It enhances the user experience of the application.

First, prepare the progress bar in the markup:

<div class="form-group row">
    <label class="col-sm-3 col-form-label">Username</label>
    <div class="col-sm-6">
        <input type="text" class="form-control" name="username" autocomplete="off" />

        <!-- The progress bar is hidden initially -->
        <div class="progress mt-2" id="progressBar" style="opacity: 0;">
            <div class="progress-bar progress-bar-striped progress-bar-animate" style="width: 100%"></div>
        </div>
    </div>
</div>

The demo 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.

Next, display the progress bar when the field is being validated. Also, gide it when the validation is done.

FormValidation
    .formValidation(
        document.getElementById('demoForm'),
        {
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        },
                        remote: {
                            message: 'The username is already taken',
                            method: 'GET',
                            url: '...',
                        },
                    }
                },
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('core.validator.validating', function(e) {
        if (e.field === 'username' && e.validator === 'remote') {
            document.getElementById('progressBar').style.opacity = '1';
        }
    })
    .on('core.validator.validated', function(e) {
        if (e.field === 'username' && e.validator === 'remote') {
            document.getElementById('progressBar').style.opacity = '0';
        }
    });

For testing purpose, the demo always answers that the username is already taken no matter what you input.

Getting notified while field is being validated

Getting notified while field is being validated

See also