Prevent OnTextChanged event for an asp.net TextBox with AutoPostBack=true

In my asp.net page, I have the following TextBox (for e-mail addresses):

<asp:TextBox ID="EmailTextBox" runat="server" AutoPostBack="true" 
             OnTextChanged="EmailTextBox_TextChanged"/>

I want to validate the e-mail address on the client-side before the postback of OnTextChanged, and I did the following with jquery:

$("#EmailTextBox").live("change", function(event) {
  var ValidEmail = ValidateEmail();

  if (ValidEmail == false)
    event.preventDefault();
});

However, even when ValidEmail returns false, the postback happens.

Why does this happen? Any ideas? How can I suppress the server side change event if the e-mail address is not valid?

Validation function:

function CheckE开发者_如何学JAVAxist(Email) {

var IsAvailable = false;
var parameters = JSON.stringify({ 'Email': Email });
//$("#CheckEmailDiv").show().delay(300);
$.ajax({
    async: false,
    type: "POST",
    url: "MyWebService.asmx/CheckAvailable",
    data: parameters,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
        IsAvailable = response.d;
        // $("#CheckEmailDiv").hide();

    }
});

return IsAvailable;

} function ValidateEmail() {

var valid = true;

var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var Email = $("#EmailTextBox").val();
var EmailError = "";
if (!pattern.test(Email)) {
    EmailError = "**Email empty or invalid";

}
else {
       var IsAvailable = CheckAvailable(Email);
       if (IsAvailable == true)
           EmailError = "**The email you typed doesnt exist";

} if (EmailError != "") { valid = false; $("#EmailErrorSpan").html(EmailError); $("#EmailErrorSpan").show(); } else $("#EmailErrorSpan").hide(); return valid;

}

---

You need the clientID of the EmailText box which is the name jquery can access it by. So the following line:

$("#EmailTextBox").live("change", function(event)

needs to be:

$("#<%=EmailTextBox.ClientID%>").live("change", function(event)

This is because the ID on the client isn't necessarily the same as in your aspx, and since jquery can only manipulate the ID's that are available in your HTML it needs that value.

---

The problem is that the inline onchange is going to fire first. There may be a better way to handle it, but this may work:

$(function() {
    var oldChange=$("#myinput").attr("onchange");
    $("#myinput").removeAttr("onchange");

    $("#myinput").change(function(event) {
        alert('mychange');

        if($(this).val().length>5){
             oldChange();   
        }
    });
});

Basically, store the old onchange in a variable, remove it from the element and attach your own onchange. Then in your onchange call it only when the conditions are right. You may run into issues though depending on what the onchange consists of (off the top of my head, passing "this" may be a problem).

See the fiddle: http://jsfiddle.net/ZCLxY/1/

Note that the issues raised in the other answer may also be a concern. Ensure that your selector is infact getting the element back and .net isn't creating some crazy ID.