jQuery / Rails: Fire JS event on submit; only when validation is passed

Question

In rails, some forms get validated on client-side automatically, so that the form doesn't get submitted when inappropriate values are in the form fields. You get something like

I want to fire a javascript event (reveal a spinning loader in this case) but only when this doesn't happen, and the form actually gets submitted.

At the moment I have

$(document).ready( function () {
  $('#new_import').on("submit", function () {
    $('#product_import_loading').slideDown();
  });
});

but this fires even when validation prevents submission.

What can I do?

Answer 1

I'm pretty sure there are no inherent jquery-ujs events regarding form validation, but you can easily use something like jQuery validation to do something only when the form passes client-side validation.

This would probably suit your needs (I don't have much experience with the plugin):

$("#new_import").on('submit', function() {
  if($(this).valid()) {
    // show your spinner
  }
  else {
    // do other stuff
  }
});