Submit button disabled until all form fields are valid.

[harkinj]

Hi,
Great plug-in.
Is there a way of initially setting the Form Submit button to disabled and it is only enabled when all the forms fields have been successfully validated and hence are ready to be submitted?
I've looked through help and issues and have found nothing to do this and I'm guessing it would be a common use case.
Thanks for your time.
John

[pashkes]

Found a solution to this problem?

[Anima-t3d]

Same request...

[Anima-t3d]

@harkinj @pashkes The closest I found so far is this: https://stackoverflow.com/a/27050178/3163075

$('input').on('blur keyup', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

This validation triggers all form fields on the page once you 'blur' from one input.
You can attach .valid() to the individual fields within the onfocusout handler. However, for activating your submit button, you cannot invoke .valid() to return a boolean without also invoking the error messages... .valid() does both at the same time. No method is provided that can tell you if the form is valid without also activating validation on the form.

If you write your own custom function for this, then you wouldn't need the plugin because you'd essentially be writing client-side validation from scratch. Maybe you can restrict the handler above to only fire when no fields are left blank... it's not perfect.

The developer has not provided any event that fires on a valid form. However, the blur and keyup events normally fire the validation test, so you can also use these to trigger a validation test and activate the button.

I think it basically comes down to someone like @staabm who needs to implement this feature.

[Anima-t3d]

The code below is what I ended up with so far:

$('#formId').on('blur keyup change', 'input', function(event) {
  validateForm('#formId');
});

function validateForm(id) {
  var valid = $(id).validate().checkForm();
    if (valid) {
      $('.form-save').prop('disabled', false);
        $('.form-save').removeClass('isDisabled');
    } else {
      $('.form-save').prop('disabled', 'disabled');
      $('.form-save').addClass('isDisabled');
    }
}

// Run once, so subsequent input will be show error message upon validation
validateForm('#formId');

It uses checkForm() instead of the form() and my disable button has the classform-save

[stale]

This issue/proposal has been automatically marked as idle and stale because it hasn't had any recent activity. It will be automtically closed if no further activity occurs. If you think this is wrong, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up.
Thank you for contributing :)

[it4need]

Does anyone know a ability to disable the button while the form is invalid? We check the fields instantly after focus out of the specific field.

[vhugogarcia]

It appears that there is no way to do such thing @it4need I ended also doing a custom code with the keyup event on each input to validate that.

[mbarmettler]

for me this worked: https://stackoverflow.com/questions/48757363/disable-form-submit-based-on-validation