ASP.NET/JavaScript - Why Isn't "Return False" Not Preventing Postback?

Question

I feel like i've done this scenario plenty of times, and it usually works, so im obviously missing something.

Here's my server-side ASP.NET Button:

<asp:Button ID="btnFoo" runat="server" Text="Foo" CssClass="button foo" OnClientClick="foo_Click();" />

Which get's rendered on the client as:

<input type="submit" name="reallylongclientid" value="Foo" onclick="foo_Click();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(reallylongclientidandpostbackoptions, false, false))" id="reallylongclientid" class="button foo">

No surprises there.

Here's the surprise, in my JavaScript function:

function foo_Click() {
   return false;
}

Okay so there's more to it than that, but i cut it down to prove a point.

When i click the button, it calls the client-side function, and returns false.

But it still posts back to the server, why?

I basically want to do this on the click of the button:

1. Do client-side validation.
2. If validation passes, post back
3. If not, show some error messages on the form.

Of course, i could change this to an client-side button (input type="button") and manually kick off the postback when i want, but i shouldn't need to do that. Or should i?

Answer 1

write return statement so when you click on button it return false which not allow to submit form

 <asp:Button ID="btnFoo" runat="server" Text="Foo" CssClass="button foo" 
OnClientClick="return foo_Click();" />