Toggle validators based on the given condition

The following form collects the user's feedback. It would like to know the user's email address. However, the user can send the feedback anonymously.

By default, we will use the notEmpty and emailAddress validators for the email field:

const demoForm = document.getElementById('demoForm');
const fv = FormValidation.formValidation(demoForm, {
    fields: {
        email: {
            validators: {
                notEmpty: {
                    enabled: true,
                    message: 'The email address is required',
                },
                emailAddress: {
                    message: 'You must enter a valid email address',
                },
            },
        },
    },
});

These validators are enabled initially. However, they can be disabled or enabled based on the fact that the Submit anonymously option is chosen or not.

We can handle the change event of the Submit anonymously checkbox, and use the disableValidator() and enableValidator() methods to toggle these validators:

demoForm.querySelector('[name="submitAnonymously"]').addEventListener('change', function (e) {
    // Enable or disable validators for the `email` field
    e.target.checked ? fv.disableValidator('email') : fv.enableValidator('email');

    // Revalidate the `email` field
    fv.revalidateField('email');
});

Toggle validators based on the given condition

Toggle validators based on the given condition

See also