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.

Examples

The examples below show credit card validation results using the 'creditcard' validation method that comes with the jQuery Validation plugin and results using the creditcard2 validation method. The first set of tests show card numbers that pass, but should not. The second set of tests show results using the creditcard2 validation extension. Try other card numbers, too (tab out of the box to fire the validation). Try entering a valid number for one card type, then change the selected card type.

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

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

Revisions

2010-01-12 Version 1.0.1 - Updated card prefixes and added support for LaserCard

2008-11-16 Version 1.0.0 - Initial Release