Ошибка при получении Jquery Blur для работы с элементом

Question

Я разрабатываю форму, которая позволяет пользователям вводить данные своей кредитной карты для завершения транзакции. Я проверяю на сервере, но хочу также обеспечить плавную проверку клиента. Я использую ASP.NET MVC с JQuery.

Что я делаю, так это использую функцию размытия JQuery для выполнения javascript, когда кто-то перемещает фокус от поля. Затем javascript определит, была ли это допустимая запись, и затем отобразит «галочку» или «крест», чтобы помочь пользователю внести исправления в форму.

Пока это работает для одного поля (срок действия кредитной карты). Тем не менее, он не работает ни для одного из других элементов (пробовал с номером кредитной карты и почтовым индексом). Используя Firebug, даже не похоже, что другие пятна стреляют. Пожалуйста помогите. Спасибо!

Вот мой JQuery:

$(document).ready(function() {

  // Hide all of the validation checkers
  $('#credit-card-number-validator').hide();
  $('#credit-card-number-correct').hide();
  $('#credit-card-expiration-validator').hide();
  $('#credit-card-expiration-correct').hide();
  $('#zip-validator').hide();
  $('#zip-correct').hide();

  // Check Zip Code
  $('#donor-zip').blur(function() {
    $('#zip-validator').show();
    $('#zip-correct').show();
    var enteredValue = $('#donor-zip').val();
    var regex = new RegExp(/^\d{5}$|^\d{5}-\d{4}$/);
    var isValid = regex.exec(enteredValue);
    if (isValid == null) {
      $('#zip-correct').hide();
      $('#zip-validator').show();
      if (enteredValue == "") {
        $('#zip-validator').hide();
      }
    }
    else {
      $('#zip-validator').hide();
      $('#zip-correct').show();
    }
  });

  // Credit Card Number Checker
  $('#donor-credit-card-number').blur(function() {
    $('#credit-card-number-validator').show();
    $('#credit-card-number-correct').show();
    var enteredValue = $('#donor-credit-card-number').val();
    var regexCard = new RegExp(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13})$/);
    var isCardValid = regexCard.exec(enteredValue);
    if (isCardValid == null) {
      $('#credit-card-number-validator').show();
      $('#credit-card-number-correct').hide();
      if (enteredValue == "") {
        $('#credit-card-number-validator').hide();
      }
    }
    else {
      $('#credit-card-number-validator').hide();
      $('#credit-card-number-correct').show();
    }
  });

  // Expiration Date Checker
  $('#donor-credit-card-expiration-date').blur(function() {
    $('#credit-card-expiration-validator').show();
    $('#credit-card-expiration-correct').show();
    var enteredValue = $('#donor-credit-card-expiration-date').val();
    var regex = new RegExp(/^(\d{2})1[0-9]$/);
    var isValid = regex.exec(enteredValue);
    if (isValid == null) {
      $('#credit-card-expiration-correct').hide();
      $('#credit-card-expiration-validator').show();
      if (enteredValue == "") {
        $('#credit-card-expiration-validator').hide();
      }
    }
    else {
      $('#credit-card-expiration-validator').hide();
      $('#credit-card-expiration-correct').show();
    }
  });
});

Вот код из моего представления (для этой части):

  <div id="donor-zip" class="textlabel">Zip Code:<br /> <%= Html.TextBox("donor-zip", null, new { @class = "textinput" })%> <span id="zip-validator"> <img src="<%= Url.Content("~/content/images/12-em-cross.png") %>" /></span> <span id="zip-correct"> <img src="<%= Url.Content("~/content/images/12-em-check.png") %>" /></span></div>

...

 <div id="donor-credit-card-number" class="textlabel">Credit Card Number:<br /> <%= Html.TextBox("donor-credit-card-number", null, new { @class = "textinput" })%> <span id="credit-card-number-validator"> <img src="<%= Url.Content("~/content/images/12-em-cross.png") %>" /></span> <span id="credit-card-number-correct"> <img src="<%= Url.Content("~/content/images/12-em-check.png") %>" /></span> </div>
  <div id="donor-credit-card-expiration" class="textlabel">Card Expiration Date:<br /> <%= Html.TextBox("donor-credit-card-expiration-date", null, new { @class = "textinput" })%> <span id="credit-card-expiration-validator"> <img src="<%= Url.Content("~/content/images/12-em-cross.png") %>" /></span> <span id="credit-card-expiration-correct"> <img src="<%= Url.Content("~/content/images/12-em-check.png") %>" /></span> </div>

Answer 1

Похоже, проблема в том, что вы выбираете элемент DIV, который оборачивает ввод. Требуемые события размытия находятся на элементах INPUT.

Пример одного способа выбора ВХОДА в DIV:

$('#donor-credit-card-number input').blur(function(){
    //etc...
});

Answer 2

Это большой код, который можно перебрать через @jchapa. :)

Однако стоит использовать имена классов вместо идентификаторов volitile.

Итак, <div id="donor-credit-card-number" class="textlabel Donor-Credit-Card-Number">, а затем используйте точечную запись в вашем jQuery, например $('.Donor-Credit-Card-Number').blur.

Так что независимо от того, какой у вас идентификатор, код будет работать.

Это может не решить вашу проблему, но устранит зависимость правильности ваших идентификаторов для работы jQuery.

Я знаю, что инфраструктура mvc обычно не меняет имена ваших элементов управления на ctrl000_, но вы никогда не знаете.

Если это не сработает, удалите весь код из скобок размытия и вставьте в блокнот и замените код предупреждениями, чтобы увидеть, что запускается, а что нет.

По крайней мере, тогда у вас есть меньшая база кода для прохождения.

затем построчно добавьте свой код.