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中选择INPUT的一种方法示例：

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

Answer 2

这是通过@jchapa进行搜索的大量代码。：）

然而，使用类名而不是volitile id可能会付出代价。

所以<div id="donor-credit-card-number" class="textlabel Donor-Credit-Card-Number">然后在你的jQuery中使用点符号，如$('.Donor-Credit-Card-Number').blur。

所以无论你的id是什么，代码都可以工作。

这可能无法解决您的问题，但它会消除您的id的依赖性，以便jQuery正常工作。

我知道mvc框架通常不会将控件的名称更改为ctrl000_，但你永远不会知道。

如果这不起作用，则删除模糊括号之间的所有代码并粘贴到笔记本中，并用警报替换代码，以查看触发的内容和不触发的内容。

至少你需要一个较小的代码库来完成。

然后逐行添加你的代码。

使Jquery模糊处理元素时出错

2 个答案: