rails disable-with doesn't work with jquery validation

Question

I'm using rails disable-with to disable form's submit button.

= form_tag(seller_path(@seller_id), :method => :post, :id => :form) do
  = text_area_tag :comment, nil, :class => 'required'
  = submit_tag 'Save changes', :class => 'btn btn-primary',:data => { 'disable_with' => "Please wait..." }

Things work fine before I use jquery validation plugin to validate the form.

$(function() {
  $.validator.setDefaults({
      submitHandler: function(form) {
          if (confirm('Are you sure you want to do this?')) {
              form.submit();
          }
      }
  });
  $("#form").validate({
      rules: {
          'comment': { required: true }
      },
  });
})

The validation works fine, but the submit button isn't disabled. What's the problem? I know I can put the disable function into the submitHandler function, but rails' disable_with is so elegant that I don't want to abandon it.

I'll appreciate if someone could explain what makes the disable_with not work. Thanks in advance.

BTW, I use rails 4.0.3, jQuery Validation Plugin v1.13.0.

Answer 1

I faced a similar problem and then came up with something like this -

$.validator.setDefaults({
   submitHandler: function(form) {
       if (confirm('Are you sure you want to do this?')) {
           $('#your_submit_button').html('Please wait...').prop('disabled', true)
           form.submit();
       }
    }
});

which gave me the same result as the data-disable-with property.