Блог

Главная - Вопросы по программированию - Предотвратить событие onTextChanged для asp.net Текстовое поле с AutoPostBack = true

Предотвратить событие onTextChanged для asp.net Текстовое поле с AutoPostBack = true

#jquery #asp.net #html #validation

#jquery #asp.net #HTML #проверка

Вопрос:

В моем asp.net страница, у меня есть следующее текстовое поле (для адресов электронной почты):

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

Я хочу проверить адрес электронной почты на стороне клиента перед обратной отправкой onTextChanged, и я сделал следующее с помощью jquery:

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

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

Однако, даже когда ValidEmail возвращает false, обратная отправка происходит.

Почему это происходит? Есть идеи? Как я могу подавить событие изменения на стороне сервера, если адрес электронной почты недействителен?

Функция проверки:

функция CheckExist(электронная почта) {

 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;

}
функция 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";

}
если (ошибка электронной почты != «») {
допустимо = false;
$(«#EmailErrorSpan»).html (ошибка электронной почты);
$(«#EmailErrorSpan»).show();
}
ещё
$(«#EmailErrorSpan»).скрыть();
возвращает действительный;

}

Ответ №1:

Вам нужен идентификатор клиента текстового поля электронной почты, по которому jquery может получить к нему доступ. Итак, следующая строка:

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

должно быть:

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

Это потому, что идентификатор на клиенте не обязательно совпадает с вашим aspx, и поскольку jquery может манипулировать только идентификаторами, которые доступны в вашем HTML, ему нужно это значение.

Комментарии:

1. теперь вы также можете использовать ClientIDMode="Static" элементы управления в webforms, чтобы не допустить искажения вашего идентификатора. тогда вы действительно можете сделать $('#myid').whatever()

2. @m.edmondson ты не забыл еще один %> для $(«#<%=EmailTextBox.ClientID»)?

3. Если это все еще не работает, вам придется опубликовать больше о том, что var ValidEmail = ValidateEmail(); does

4. изменено выше. я предполагаю, что проблема вызвана autopostback. Потому что, когда я использую простой HTML-ввод, срабатывает jqeury event .change, но изменения HTML-ввода на стороне сервера не происходит

5. Это вероятно, потому что идентификатор совпадает — просмотрите исходный код в своем браузере, чтобы понять, что я имею в виду

Ответ №2:

Проблема в том, что встроенный onchange будет запущен первым. Возможно, есть лучший способ справиться с этим, но это может сработать:

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

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

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

В принципе, сохраните старый onchange в переменной, удалите его из элемента и прикрепите свой собственный onchange. Затем в вашем onchange вызывайте его только при правильных условиях. Вы можете столкнуться с проблемами, хотя в зависимости от того, из чего состоит onchange (на мой взгляд, передача «этого» может быть проблемой).

Смотрите скрипту:http://jsfiddle.net/ZCLxY/1 /

Обратите внимание, что проблемы, поднятые в другом ответе, также могут вызывать беспокойство. Убедитесь, что ваш селектор фактически возвращает элемент обратно, а .net не создает какой-нибудь сумасшедший идентификатор.