Question

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.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();
    }
  });
});

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>

Answer 1

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...
});