ASP.Net textbox OnTextChanged firing even though validation is invalid - asp.net

Question

Here's a simple version of my code:
<asp:TextBox ID="textBox" runat="server" AutoPostBack="true" OnTextChanged="textChanged" CausesValidation="true" ValidationGroup="valGroup"></asp:TextBox>
<asp:RegularExpressionValidator ID="regEx" runat="server" ControlToValidate="textBox" ValidationGroup="valGroup" ErrorMessage="Not a valid number." Display="Dynamic" ValidationExpression="(^0*[1-9]+\d*(\.\d+)?$)|(^0*\.0*[1-9]+\d*$)" />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSaveClick" ValidationGroup="valGroup" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancelClick" CausesValidation="false" />
It's a text box with a regular expression validator that's supposed to restrict the input to be only positive real numbers. When the text changes and it passes validation a textChanged() function is called.
If the text is invalid, textChanged() won't fire, and the save button won't work as well.
This works as intended.
I've also got a cancel button, and it's supposed to just clear the text box (and some other things server side). It should be able post back to the server whether or not the text box is valid, hence the CausesValidation="false" tag.
My problem is that when I enter something invalid into the text box, and then click cancel it actually executes textChanged() before btnCancelClick(). Even though it isn't valid.
This is a huge problem because textChanged() uses the text box text as a number, so the page throws an exception.
I have no idea what's causing textChanged() to be called. For one thing, the cancel button doesn't even call that function. And the regular expression validator should prevent the text box from calling it.
Edit: I've tried making some changes and experimenting.
function cancel()
{
document.getElementById('<%=textBox.ClientID%>').value = "";
}
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="cancel()" CausesValidation="false" />
I switched the cancel button to call a JavaScript method to try to clear the text box. The results are kind of interesting.
When an invalid string is entered as the first thing, then the cancel button works fine. It clears the text box without textChanged() being called.
If I type in a valid number, textChanged() is called as I expect. But when I click the cancel button it does call cancel(), and immediately after that it calls textChanged() again, but now the text box is empty, leading to an exception.
A similar thing happens if I enter something valid, and then make it invalid. textChanged() is called for the valid input. When the incorrect input is added, the validator prevents textChanged() from being called. But when I click cancel it goes from cancel() to textChanged().
I was thinking that maybe it was because validators don't persist through postback, but with the JavaScript function cancel() the button can't cause the page to postback. textChanged() has to be what's causing it, but I have no idea how.
Edit 2: I'm not going to mark this solved, since it's still a huge problem in my opinion, but I have found a workaround.
<script>
function cancel() {
document.getElementById('<%=textBox.ClientID%>').value = "";
return false;
}
</script>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return cancel();" CausesValidation="false" />
This doesn't allow the button to cause a postback under any circumstances. It's fixing something that shouldn't be there in the first place, but there it is.
This helps with the button click, but not with other things. I've got a GridView with an OnSelectedIndexChanged function server-side. It also causes the page to post back with the textChanged() function. I could try to create a JavaScript version of the GridView function and fix it like the cancel button, but at this stage I'll probably remove the OnTextChanged event handler and put the textChanged() function and put it behind a button.

Answer 1

add causesvalidation="true" works for me on the textbox control.

Answer 2

So close... What's needed is simply setting a dedicated name to the ValidationGroup name on the Cancel button. This will cause it to be processed out of cycle with the rest of the validation. Not setting it effectively puts it in the "default" validation group which behaves (as you've seen), a bit oddly.
To allow the Cancel button to be exempt from the rest of the form validation, the rule I generally apply is [ValidationGroupName]Cancel to ensure it's triggered outside that block of validation. In this case, setting the Cancel button to something like;
<asp:Button ID="btnCancel" runat="server" Text="Cancel" ValidationGroup="valGroupCancel" OnClick="btnCancelClick" />
Should give you your expected behaviour.