jQuery .submit() doesn't work after i use jquery .validate() on a form

Question

I got a button that triggers the form submit:

$('#formButton').click(function(e) {
  $('#form').submit();
)};

When i add a form validator, it no longer submits anything (doesn't do anything):

  var validate= $('#form').validate({
    "rules": {
      "name": {
         "required": true
      }
    }
  });

This is what i want to do but like i said the .submit() function does't do anything once i use the .valiate() function:

$('#formButton').click(function(e) {
  if (validate.form() === false) {
    e.preventDefault();
  } else {
    $('#form').submit();
  }
)};

I cant use ajax instead of .submit() because i have some inputs that has a type of 'file', and as i understand i cant .serialize() for such input types.

Any suggestions why the .submit() function stops submitting once i use .validate()?

Answer 1

validate method prevents the default action of the submit event, when you submit the form the validate method is called. If you want to submit the form when the form fields are valid, you should define a submitHandler function on the passed object to the validate method:

$('#form').validate({
    "rules": {
      "name": {
         "required": true
      }
    },
    submitHandler: function(form) {
        form.submit();
    }
});

As the form argument is a raw DOM element, calling it's submit method doesn't call the validate method. If you don't want to define the mentioned method you can get the raw DOM element using .get() method and call it's submit method:

$('#form').get(0).submit();