Enabling submit button only when all fields are valid

The following example will disable the Submit button as long as there is at least one invalid field. In case all of fields are valid, the button will be enabled. We can archive it by using the onStatusChanged option provided by the FieldStatus plugin.
document.addEventListener('DOMContentLoaded', function(e) {
const demoForm = document.getElementById('demoForm');
// Get the submit button element
const submitButton = demoForm.querySelector('[type="submit"]');
FormValidation.formValidation(
demoForm,
{
fields: {
...
},
plugins: {
fieldStatus: new FormValidation.plugins.FieldStatus({
onStatusChanged: function(areFieldsValid) {
areFieldsValid
// Enable the submit button
// so user has a chance to submit the form again
? submitButton.removeAttribute('disabled')
// Disable the submit button
: submitButton.setAttribute('disabled', 'disabled');
}
}),
...
},
}
);
});
Enabling submit button only when all fields are valid

See also