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

0 jchapa [2009-12-17 09:03:00]

Я разрабатываю форму, которая позволяет пользователям вводить данные своей кредитной карты для завершения транзакции. Я проверяю на сервере, но хочу также обеспечить гладкую проверку клиента. Я использую 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>

jquery asp.net-mvc