jQuery Validator with Loding GIF

I had to add Loding GIF   form submmit but it was not trigger at the exact event due to form validations.

However as fallows it can be achieved easy .I use jQuery form validator (not HTML 5) .

CSS

div#spinner {
    display: none;
    width:160px;
    height: 160px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(../images/page-loader.gif) no-repeat center ;
    text-align:center;
    padding:10px;
    font:normal 16px Tahoma, Geneva, sans-serif;
    margin-left: -50px;
    margin-top: -50px;
    z-index:2;
    overflow: auto;
}

HTML

 <div id="spinner"></div>


JS


$(document).ready(function() {
   $("form[name='registerRefer']").validate({
    rules: {
       name: {
           required: true,


       }

},

                                 submitHandler: function (form) {
                                  $("div#spinner").fadeIn("fast");
                                     form.submit();
                                 }
                             });
 
});