Credit card validation extension for jQuery Validation plugin

Here's an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.

Usage

Here is an overview of one way to use the creditcard2 extension. There are a number of ways you can wire up validation rules with the jQuery Validation plugin, so it helps if you already understand how that plugin generally works (settings, rules, styling, error messages, etc).

1. Add the scripts

Include jquery, jquery validation and the creditcard2 extension in your html. Adjust the file paths as needed.

<script src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.creditcard2.js"></script>

2. Add the HTML elements to your page

By default, the names of the different credit card types set in the option values below must be spelled this way, but the case (upper/lower) does not matter. If you need to use different option values, you could map your id's in a lookup hash and do a lookup using some code in a function attached to the 'creditcard2' setting shown in step 3 (below).

<select id="cardType"><option value="AmEx">AmEx</option><option value="CarteBlanche">CarteBlanche</option><option value="DinersClub">DinersClub</option><option value="Discover">Discover</option><option value="enRoute">enRoute</option><option value="JCB">JCB</option><option value="LaserCard">LaserCard</option><option value="Maestro">Maestro</option><option value="MasterCard">MasterCard</option><option value="Solo">Solo</option><option value="Switch">Switch</option><option value="Visa">Visa</option><option value="VisaElectron">VisaElectron</option>
</select>


<input type="text" id="cardnum" name="cardnum" />

3. Setup the validator

Use one of the available jquery Validation plugin rule bindings to setup the validation rule for your credit card field. The code below shows setting up the rule inside a jQuery document ready function. The function in the creditcard2 setting passes the currently selected credit card type to the creditcard2 extension each time the validator fires.

$(function() {$("#myform").validate({rules: {cardnum: {creditcard2: function(){ return $('#cardType').val(); }}}  });

// helper function to fire validation on field2 when cardType changes//$('#cardType').change(function(){$("#myform").validate().element('#cardnum');});});

Support

Please post questions and feedback to the jQuery general discussion group. We're active participants in the group. Use the word "creditcard2" in the subject line to make it easy for us to notice.

License

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html

Download

Version 1.0.1
  Source: jquery.validate.creditcard2-1.0.1.js.
  Packed: jquery.validate.creditcard2.pack-1.0.1.js

Code Backup is Here :
--Start Code of jquery.validate.creditcard2-1.0.1.js --
/*
* jQuery creditcard2 extension for the jQuery Validation plugin (http://plugins.jquery.com/project/validate).
* Ported from http://www.braemoor.co.uk/software/creditcard.shtml by John Gardner, with some enhancements.
*
* Author: Jack Killpatrick
* Copyright (c) 2010 iHwy, Inc.
*
* Version 1.0.1 (1/12/2010)
* Tested with jquery 1.2.6, but will probably work with earlier versions.
*
* History:
* 1.0.0 - released 2008-11-17
* 1.0.1 - released 2010-01-12 -> updated card prefixes based on data at: http://en.wikipedia.org/wiki/Credit_card_number and added support for LaserCard
*
* Visit http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx for usage information
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/

jQuery.validator.addMethod("creditcard2", function(value, element, param) {
var cardName = param;

var cards = new Array();
cards[0] = { cardName: "Visa", lengths: "13,16", prefixes: "4", checkdigit: true };
cards[1] = { cardName: "MasterCard", lengths: "16", prefixes: "51,52,53,54,55", checkdigit: true };
cards[2] = { cardName: "DinersClub", lengths: "14,16", prefixes: "305,36,38,54,55", checkdigit: true };
cards[3] = { cardName: "CarteBlanche", lengths: "14", prefixes: "300,301,302,303,304,305", checkdigit: true };
cards[4] = { cardName: "AmEx", lengths: "15", prefixes: "34,37", checkdigit: true };
cards[5] = { cardName: "Discover", lengths: "16", prefixes: "6011,622,64,65", checkdigit: true };
cards[6] = { cardName: "JCB", lengths: "16", prefixes: "35", checkdigit: true };
cards[7] = { cardName: "enRoute", lengths: "15", prefixes: "2014,2149", checkdigit: true };
cards[8] = { cardName: "Solo", lengths: "16,18,19", prefixes: "6334, 6767", checkdigit: true };
cards[9] = { cardName: "Switch", lengths: "16,18,19", prefixes: "4903,4905,4911,4936,564182,633110,6333,6759", checkdigit: true };
cards[10] = { cardName: "Maestro", lengths: "12,13,14,15,16,18,19", prefixes: "5018,5020,5038,6304,6759,6761", checkdigit: true };
cards[11] = { cardName: "VisaElectron", lengths: "16", prefixes: "417500,4917,4913,4508,4844", checkdigit: true };
cards[12] = { cardName: "LaserCard", lengths: "16,17,18,19", prefixes: "6304,6706,6771,6709", checkdigit: true };

var cardType = -1;
for (var i = 0; i < cards.length; i++) { if (cardName.toLowerCase() == cards[i].cardName.toLowerCase()) { cardType = i; break; } } if (cardType == -1) { return false; } // card type not found value = value.replace(/[\s-]/g, ""); // remove spaces and dashes if (value.length == 0) { return false; } // no length var cardNo = value; var cardexp = /^[0-9]{13,19}$/; if (!cardexp.exec(cardNo)) { return false; } // has chars or wrong length cardNo = cardNo.replace(/\D/g, ""); // strip down to digits if (cards[cardType].checkdigit) { var checksum = 0; var mychar = ""; var j = 1; var calc; for (i = cardNo.length - 1; i >= 0; i--) {
calc = Number(cardNo.charAt(i)) * j;
if (calc > 9) {
checksum = checksum + 1;
calc = calc - 10;
}
checksum = checksum + calc;
if (j == 1) { j = 2 } else { j = 1 };
}

if (checksum % 10 != 0) { return false; } // not mod10
}

var lengthValid = false;
var prefixValid = false;
var prefix = new Array();
var lengths = new Array();

prefix = cards[cardType].prefixes.split(",");
for (i = 0; i < prefix.length; i++) {
var exp = new RegExp("^" + prefix[i]);
if (exp.test(cardNo)) prefixValid = true;
}
if (!prefixValid) { return false; } // invalid prefix

lengths = cards[cardType].lengths.split(",");
for (j = 0; j < lengths.length; j++) {
if (cardNo.length == lengths[j]) lengthValid = true;
}
if (!lengthValid) { return false; } // wrong length

return true;
}, jQuery.validator.messages.creditcard);

--End Code--