core.validator.validating event

Triggered when start excuting validation of particular validator on a field element

The event object contains the following properties

  • element: HTMLElement — The field element which is being validated
  • elements: HTMLElement[] — The field elements
  • field: String — The field name
  • validator: String — The validator name

Example: Getting notified while field is being validated

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 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:


Tip

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.