Unusual Javascript Behaviour in ASP.NET - asp.net

Question

I have created an application in ASP.NET and using JavaScript to validate the fields either its empty or not; calling that validation function onClientClick event of ASP.NET Button Control and also using onClick event for server side processing.
Here I am enclosing the javascript: validation function
function validate() {
if (document.getElementById("<%=txt_msn.ClientID%>").value == "") {
alert("Membership number can not be blank; Fill all fields marked as *");
document.getElementById("<%=txt_msn.ClientID%>").focus();
return false;
}
return true;
}
Here I am calling that function under ASP.NET Control
<asp:Button ID="btn_save_pi" runat="server"
Text="Save" OnClientClick="return validate()" OnClick="btn_save_pi_click" />
Now what I have observed that as the validation function returns false it executes the server side method i.e onclick event but on the return of true it do nothing. But when I switch the return value, means on empty field return true and on non empty field return false, then it works fine.
I am confuse in this why it is acting like that. It suppose to act like I have written above i.e. do nothing on false return and on true return execute server side processing.
Please explain this, it will help me to develop the further applications too.

Answer 1

Your code works perfectly fine for me in IE as well as FF.
So if it still gives you problem you can go for a approach with less problems using asp.net validation controls.
But if you still want to go for javascript validations of your own, use this:
http://docs.jquery.com/Plugins/Validation
You can go fancy with validation and make validations the way you want.
to understand it better, please go through the example given at the end or refer this:
http://jquery.bassistance.de/validate/demo/
Hope this helps....

Answer 2

So perhaps there is an actual solution, but I just do this little workaround to avoid the OnClientClick property altogether.
Hide your button:
style="display:none;"
Next to your button, stick in another "fake" button:
<input type="button" value="Save"
onclick="if (validate()) {
document.getElementById('<%=btn_save_pi.ClientID%>').click(); }" />