Showing only one message each time

By default, all messages are shown at the same time. It's also possible if you want only one message to be shown each time by triggering the core.validator.validated event. This event is triggered when the field doesn't pass a particular validator.

In the following registration form, the username field must pass three validators. But there is one message shown each time.

const demoForm = document.getElementById('demoForm');
FormValidation.formValidation(demoForm, {
    fields: {
        username: {
            validators: {
                ...
            }
        }
    },
    plugins: {
        ...
    },
}).on('core.validator.validated', function(e) {
    if (!e.result.valid) {
        // Query all messages
        const messages = [].slice.call(demoForm.querySelectorAll('[data-field="' + e.field + '"][data-validator]'));

        messages.forEach((messageEle) => {
            const validator = messageEle.getAttribute('data-validator');
            messageEle.style.display = validator === e.validator ? 'block' : 'none';
        });
    }
});

Showing only one message each time

See also