Enabling validators on the fly

In the following form, the new password is not required. Its validators are disabled. When user set the password, the validators will be enabled.

Initially, all validators of new password and confirmation password are disabled:

const form = document.getElementById('demoForm');
const fv = FormValidation.formValidation(form, {
    fields: {
        password: {
            validators: {
                notEmpty: {
                    enabled: false,
                    ...,
                }
            }
        },
        confirmPassword: {
            validators: {
                notEmpty: {
                    enabled: false,
                    ...,
                },
                identical: {
                    enabled: false,
                    ...,
                }
            }
        },
    },
});

Then enable them if the new password is not empty:

let enabled = false;
form.querySelector('[name="password"]').addEventListener('input', function (e) {
    const password = e.target.value;
    if (password === '' && enabled) {
        enabled = false;
        fv.disableValidator('password').disableValidator('confirmPassword');
    } else if (password != '' && !enabled) {
        enabled = true;
        fv.enableValidator('password').enableValidator('confirmPassword');
    }

    // Revalidate the confirmation password when the new password is changed
    if (password != '' && enabled) {
        fv.revalidateField('confirmPassword');
    }
});

Enabling validators on the fly

Enabling validators on the fly

See also