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?
+1
A:
Without knowing much about the detail... why don't you only start the throbber when the client side validation passes? As a user I'd be surprised to see a UI element flash up very temporarily, only to be removed again and replaced by an error message.
Jon Skeet
2010-01-02 20:53:22
That might be a better approach but I still have to solve the same problem of responding to the result of client side validation. I'll try it both ways once I get to that point. However, my main goal is to prevent the user from clicking the damn button umpteen times if the site doesn't respond in 10 nanoseconds. :-)
Jamie Ide
2010-01-02 21:23:34
@Jamie: So disable the button as soon as the user clicks. Re-enable it if validation fails, or show the throbber if validation succeeds. Yes, you've got to respond to the result of client-side validation - I would have thought that was pretty much a given.
Jon Skeet
2010-01-02 21:32:01
@Jon It's not a given, it's the question. I don't know how to determine the result of client side validation (on the client side) when using the ASP.NET validation controls. I could easily write my own validation in this case but once I get this working on the login form I want to implement it on forms with many controls.
Jamie Ide
2010-01-02 21:39:28
@Jamie: Your question was about the throbber, which IMO is putting the cart before the horse. I would entirely ignore the throbber side of things for the moment. Go straight to the root cause: read up on client side validation and how to respond to its results. I don't know a lot about it myself, but I would expect any tutorial or book on ASP.NET validation to go into it.
Jon Skeet
2010-01-02 22:26:18
@Jon: I appreciate your responses but I wouldn't have asked the question here if the answer were easily found in a tutorial.
Jamie Ide
2010-01-03 19:42:37
A:
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" />
Jamie Ide
2010-01-03 19:39:12