Error Getting Jquery Blur to Work on Element

I am developing a form that allows users to enter their credit card information to complete a transaction. I validate on the server, but want to provide smooth client validation as well. I am using ASP.NET MVC with JQuery.

What I am doing is using the JQuery blur function to execute the javascript whenever someone moves focus away from a field. The javascript will then determine whether it was a valid entry, and then either show a "check" or a "cross" to assist the user in making corrections to the form.

So far, it is working for one field (the credit card expiration date). It is not working for any of the other elements, though (have tried it with the credit card number and zip code). Using Firebug, it doesn't even appear that the other blurs are firing. Please assist. Thanks!

Here is my 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.e开发者_C百科xec(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();
    }
  });
});

Here is the code from my View (for this portion):

  <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>

Looks like the problem is you are selecting the DIV element that wraps the input. The blur events you want are on the INPUT elements.

Example of one way to select the INPUT within the DIV:

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

That's a lot of code to trawl through @jchapa. :)

However it might pay to use class names instead of volitile id's.

So <div id="donor-credit-card-number" class="textlabel Donor-Credit-Card-Number"> and then use the dot notation in your jQuery like $('.Donor-Credit-Card-Number').blur.

So no matter what your id is the code will work.

This may not solve your problem but it will elminate the dependancy for your id's to be correct for ther jQuery to work.

I know the mvc framework doesn't generally change the names of your controls to ctrl000_ what ever, but you never know.

If that doesn't work then remove all the code between the blur brackets and paste into notebook and replace the code with alerts to see what is firing and what is not.

At least then you have a smaller code base to go through.

then add your code back line by line.