How do I hide a throbber when ASP.NET client side validation fails?

Question

I'm using the ASP.NET login control and I'm displaying a jQuery throbber when the submit button is clicked. This works fine, but the throbber is visible if client side validation fails and the button is invisible, so the user cannot re-submit the form. How do I hide the throbber if client side validation fails?

Answer 1

It was a little tricky but I got this working. First of all, the Login control must be templated, which I expected, but even so the ClientID of the button is inaccessible so I had to add a class selector to it. I first tried to add the throbber and turn it on if validation succeeded using the lightly/un documented Page_ClientValidate() event but that didn't work because the throbber by default subscribes to the button's click event and turns on before validation occurs.

What did work was sticking to the mini API and adding the throbber to the button if Page_IsValid is true. The button's CausesValidation attribute must be true (the default).

javascript:

    $(document).ready(function() {
        $('.login').click(function() {
            if (Page_IsValid) {
                $('.login').throbber({ image: "Images/throbber.gif" });
            }
        });
    });

button markup; the only addition from the Login control template is the CssClass attribute:

<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="uxLogin" CssClass="login" />