Detect actual form submit and show loader

Question

I have a form which has jQuery-Validation-Engine enabled and I want to show a loader once the form is actually getting submitted i.e. when it is without errors. If I am using following code, its getting called even when there are errors in form.

$("#my-form").submit(function(){
  showLoaderGIF here;
});

I would like to know how to detect the actual form submit and not just click on submit button ? Is there any way I can use jQuery-Validation-Engine's 'onSuccess' callback ?

Thanks in advance

possible duplicate of [How to do a Jquery Callback after form submit?](http://stackoverflow.com/questions/11534690/how-to-do-a-jquery-callback-after-form-submit) — powtac, Mar 05 '13 at 11:01

score 1 · Accepted Answer · answered Mar 05 '13 at 11:37

1

Finally, I was able to achieve this using following code

$("my-form").validationEngine('attach', {    
  onValidationComplete: function(form,status){
    if(status == true){
      showLoader;
      return true;
    }
  }
});

answered Mar 05 '13 at 11:37

furiabhavesh

416
3
17

Raad · Answer 2 · 2013-03-05T11:47:29.100

0

I would ditch the $("#my-form").submit, write a couple of functions to show/hide my loader image, and use the following hooks:

jQuery("#my-form").validationEngine({
  ...
  onBeforeAjaxFormValidation: showLoader,
  onAjaxFormComplete: hideLoader,
  ...
});

Edit

Ok, so to display if the form is valid but not allow it to submit, you could use the onValidationComplete option:

jQuery("#my-form").validationEngine('attach', {
  onValidationComplete: function(form, status){
    if(status) { showLoader(); }
  }  
});

edited Mar 05 '13 at 11:47

answered Mar 05 '13 at 11:09

Raad

4,540
2
24
41

in my case the form is not yet submitted to server. I want to show loader if (form is error free && submit button is clicked) – furiabhavesh Mar 05 '13 at 11:20

Detect actual form submit and show loader

2 Answers2