jQuery Mobile display spinner - jquery-mobile

Question

I am developing a jQuery Mobile website and am using the jQuery validation plugin to validate my forms. On some forms I have set data-ajax="false", but still wanted to show the loading spinner when the submit button is clicked.
To display the spinner I use the following code
// Display spinner
$(document).delegate('.ajaxSpinner', 'click', function () {
if($(".ajaxValidate").length == 0 || $(".ajaxValidate").valid()) { // Show spinner if no validation or form is valid
$.mobile.showPageLoadingMsg();
}
});
The form submit button has a class of 'ajaxSpinner', and the form itself has a class of 'ajaxValidate'.
On most forms this works great, if the form is invalid when submit is clicked you don't see the spinner, whereas if the form is valid, the spinner is displayed.
I have just one single form that isn't playing nice....the spinner shows regardless of whether the form is valid or not. The form is quite long, so I'm wondering if the validation hasn't completed before my manual display spinner code fires.
I'm not very proficient with jQuery so can anyone spot the flaw in my code?
Could it be a timing issue? If it is, is there a good way to make sure the validation has completed before the click function fires?

Answer 1

I think you need to call the spinner inside your validation function.
So, using the validation plugin, you may normally have something like this:
$(".ajaxValidate").validate({
submitHandler : function(form) {
// START YOUR SPINNER HERE
$.mobile.showPageLoadingMsg();
$(form).ajaxSubmit({
success: function() { // YOUR FORM WAS SUBMITTED SUCCESSFULLY
// DO SOMETHING WHEN THE FORM WAS SUBMITTED SCESSFULLY ...
// ...
// STOP THE SPINNER EVENTUALLY
//$.mobile.hidePageLoadingMsg()
}
});
}
});
Hope this helps. Let me know if this works for you.