錯誤獲取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_，但永遠不會知道。

如果這樣做不起作用，則刪除模糊括號之間的所有代碼並粘貼到筆記本中，並用警報替換代碼以查看什麼是觸發，哪些不是。

至少你有一個更小的代碼庫來完成。

然後逐行添加你的代碼。