rails 3 display loading animation on form submit with javascript validations

I have a form which I submit via ajax, while the form is submitting, I need to display a loading animated gif. It is all working fine when I do the folowing

my form

  <% form_tag url_for(:action=>'create'),:remote=>true, :id=>"registration_form" do %>
   ...some form fields...
   <% submit_tag 'Create my account' %>
 <% end %>

I have an animated gif which is located in a hidden div which is:

<div id="loading_registration" style="display:none" >loading...</div>

and in my script section I have

  var toggleLoading = function() { $("#loading_registration").toggle() };
  $("#registration_form")
  .bind("ajax:loading",  toggleLoading)
  .bind("ajax:complete", toggleLoading)
  .bind('ajax:success', function(evt, data, status, xhr) {
                   });  

now I needed to change this in order to perform a client javascript validation functions befeor the form is submitted via ajax to the server.

so I did the following:

in my script section I added the following function:

$('#registration_form').submit(function() {

if ($("#first_name").val()!=''){
    $(this).ajaxSubmit(options); //submit the form 
}
else{
    ..display some client side message to the user
}
    // !!! Important !!!
    // always return false to prevent standard browser submit and page navigation
    return false;
});

It is working all right and perform the javascript validations before it sands the ajax call.

but the problem is that now it is not displaying my loading gif animation

I tried to add it to the option section of the ajaxSubmit in the follwing way:

var toggleLoading = function() { $("#loading_registration").toggle() };                   
 var options = { loading: toggleLoading,
                 complete: toggleLoading}                    


$('#registration_form').ajaxSubmit(options);
开发者_C百科

but it didn't worked. it only working if I call an alert function from inside like this

var options = { loading: alert('loading'),
        complete: alert('complete')}                     
 $('#registration_form').ajaxSubmit(options);

but if I call to a function instead of the alert it stops working

I will be glad to here if someone have a solution to this problem

Thanks

Have you tried the same with jquery validator plugin?