title: rails 3 display loading animation on form submit with javascript validations
body: <p>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</p>
  
  <p>my form</p>
  
  <pre><code>  &lt;% form_tag url_for(:action=&gt;'create'),:remote=&gt;true, :id=&gt;"registration_form" do %&gt;
     ...some form fields...
     &lt;% submit_tag 'Create my account' %&gt;
   &lt;% end %&gt;
  </code></pre>
  
  <p>I have an animated gif which is located in a hidden div which is:</p>
  
  <pre><code>&lt;div id="loading_registration" style="display:none" &gt;loading...&lt;/div&gt;
  </code></pre>
  
  <p>and in my script section I have </p>
  
  <pre><code>  var toggleLoading = function() { $("#loading_registration").toggle() };
    $("#registration_form")
    .bind("ajax:loading",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind('ajax:success', function(evt, data, status, xhr) {
                     });  
  </code></pre>
  
  <p>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.<br></p>
  
  <p>so I did the following:<br>
  in my script section I added the following function:<br></p>
  
  <pre><code>$('#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;
  });
  </code></pre>
  
  <p>It is working all right and perform the javascript validations before it sands the ajax call.<br>
  <strong>but the problem is that now it is not displaying my loading gif animation</strong>  <br>
  I tried to add it to the option section of the  ajaxSubmit in the follwing way:</p>
  
  <pre><code>var toggleLoading = function() { $("#loading_registration").toggle() };                   
   var options = { loading: toggleLoading,
                   complete: toggleLoading}                    
  
  
  $('#registration_form').ajaxSubmit(options);
  </code></pre>
  
  <p>but it didn't worked. it only working if I call an alert function from inside like this</p>
  
  <pre><code>var options = { loading: alert('loading'),
          complete: alert('complete')}                     
   $('#registration_form').ajaxSubmit(options);
  </code></pre>
  
  <p>but if I call to a function instead of the alert it stops working</p>
  
  <p>I will be glad to here if someone have a solution to this problem</p>
  
  <p>Thanks</p>