错误获取jquery模糊工作元素

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。

所以不管你的id是什么代码都可以工作。

这可能无法解决您的问题，但它会取消您的ID的依赖性，使其正确工作。

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

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

至少你有一个更小的代码库来完成。

然后逐行添加你的代码。