Disable the submit button after validating a form

The SubmitButton plugin will perform validation automatically whenever you click the submit button. If you want to prevent users from submitting the form, you might need to disable the submit button when all fields are valid.

It can be done by handling the core.form.valid event as following:

const demoForm = document.getElementById('demoForm');

// Query the submit button
const submitButton = demoForm.querySelector('button[type="submit"]');

FormValidation
    .formValidation(
        demoForm,
        {
            fields: {
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('core.form.valid', function() {
        // Disable the submit button
        submitButton.setAttribute('disabled', true);

        // Do something else such as sending the form to back-end via Ajax request
        // ...
    });

You can use the FieldStatus plugin to enable the submit button only when all fields are valid

Disable the submit button after validating a form

See also