O'Reilly

Validate Credit Cards with JavaScript

By on  

We all know that JavaScript shouldn't be a web form's only method of validation but client side validation does prevent unnecessary server side processing when user input is obviously invalid.  I'd also consider client side form validation a usability booster (...or nightmare when done poorly.)  I often hear developers complain about how difficult validating credit cards can be, especially when only supporting specific credit cards.  Luckily the Dojo Toolkit includes dojox.validate.creditCard, a resource capable of efficiently validating a credit card.  Better yet, you can easily take its logic and create you own validator.

The Dojo JavaScript

The validation code is quite compact but well-commented;  read those comments as you look at the code:

dojo.provide("dojox.validate.creditCard");
/*=====

	dojox.validate.creditCard = {
		// summary:
		//		Module provides validation functions for Credit Cards, using account number
		//		rules in conjunction with the Luhn algorigthm, with a plugable card info database.
	};
	
=====*/
dojo.require("dojox.validate._base");

dojox.validate._cardInfo = {
	// summary: A dictionary list of credit card abbreviations
	//
	// description:
	//
	//		A hash of valid CC abbreviations and regular expressions
	//
	//		mc: Mastercard
	//		ec: Eurocard
	//		vi: Visa
	//		ax: American Express
	//		dc: Diners Club
	//		bl: Carte Blanch
	//		di: Discover
	//		jcb: JCB
	//		er: Enroute
	//
	//	example:
	//		Define your own card, gift-card, whatever. Starts with 7,
	//		is 15 total length.
	//	| dojo.mixin(dojox.validate._cardInfo, {
	//	| 	"my":"7[0-9]{14}"
	//	| });
	
	'mc':'5[1-5][0-9]{14}',
	'ec':'5[1-5][0-9]{14}',
	'vi':'4(?:[0-9]{12}|[0-9]{15})',
	'ax':'3[47][0-9]{13}',
	'dc':'3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
	'bl':'3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
	'di':'6011[0-9]{12}',
	'jcb':'(?:3[0-9]{15}|(2131|1800)[0-9]{11})',
	'er':'2(?:014|149)[0-9]{11}'
}

dojox.validate.isValidCreditCard = function(value, ccType){
	// summary: Validate a credit card number by type with Luhn checking.
	//
	// description:
	//		Checks if a credit card type matches the # scheme in a passed value, and if
	//		the Luhn checksum is accurate (unless its an Enroute card, in which case
	//		the checkSum is skipped), returning a Boolean to check against.
	//
	// value: String|Int
	//		A Value (credit card number) to validate
	//
	// ccType: String
	//		A credit-card abbreviation.
	//
	// example:
	// |	if(dojox.validate.isValidCreditCard("12345", "mc")){
	// |		console.log('inconceivable');
	// |	}
	
	return ((ccType.toLowerCase() == 'er' || dojox.validate.isValidLuhn(value)) &&
			dojox.validate.isValidCreditCardNumber(value, ccType.toLowerCase())); // Boolean
}

dojox.validate.isValidCreditCardNumber = function(value, ccType){
	// summary:
	//		Checks if value matches the pattern for that card or any card types if none is specified
	//
	// value: String|Int
	//		CC #, white spaces and dashes are ignored
	//
	// ccType: String?
	//		One of the abbreviation values in `dojox.validate._cardInfo` --
	//		if Omitted, function returns a `|` delimited string of matching card types,
	//		or false if no matches found.

	value = String(value).replace(/[- ]/g,''); //ignore dashes and whitespaces

	var cardinfo = dojox.validate._cardInfo, results = [];
	if(ccType){
		var expr = '^' + cardinfo[ccType.toLowerCase()] + '$';
		return expr ? !!value.match(expr) : false; // boolean
	}

	for(var p in cardinfo){
		if(value.match('^' + cardinfo[p] + '$')){
			results.push(p);
		}
	}
	return results.length ? results.join('|') : false; // String | boolean
}

dojox.validate.isValidCvv = function(/* String|Int */value, /* String */ccType) {
	// summary:
	//  	Validate the security code (CCV) for a passed credit-card type.
	//
	// description:
	//
	// value:
	
	if(!dojo.isString(value)){
		value = String(value);
	}
	var format;
	switch (ccType.toLowerCase()){
		case 'mc':
		case 'ec':
		case 'vi':
		case 'di':
			format = '###';
			break;
		case 'ax':
			format = '####';
			break;
	}
	
	return !!format && value.length && dojox.validate.isNumberFormat(value, { format: format }); // Boolean
}

You would use the code above by requiring the resource and running the isValidCreditCard method, passing the value and card type.  But what if you don't use the Dojo Toolkit?  You can pull the code out of Dojo and into your own application:

// Create an object
var creditCardValidator = {};
// Pin the cards to them
creditCardValidator.cards = {
	'mc':'5[1-5][0-9]{14}',
	'ec':'5[1-5][0-9]{14}',
	'vi':'4(?:[0-9]{12}|[0-9]{15})',
	'ax':'3[47][0-9]{13}',
	'dc':'3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
	'bl':'3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
	'di':'6011[0-9]{12}',
	'jcb':'(?:3[0-9]{15}|(2131|1800)[0-9]{11})',
	'er':'2(?:014|149)[0-9]{11}'
};
// Add the card validator to them
creditCardValidator.validate = function(value,ccType) {
	value = String(value).replace(/[- ]/g,''); //ignore dashes and whitespaces

	var cardinfo = creditCardValidator.cards, results = [];
	if(ccType){
		var expr = '^' + cardinfo[ccType.toLowerCase()] + '$';
		return expr ? !!value.match(expr) : false; // boolean
	}

	for(var p in cardinfo){
		if(value.match('^' + cardinfo[p] + '$')){
			results.push(p);
		}
	}
	return results.length ? results.join('|') : false; // String | boolean
};

With the creditCardValidator object complete, it's time to use the resource:

if(!creditCardValidator.validate(document.id("creditCardField"))) {
	alert("Invalid credit card!");
}

There you have it:  simple credit card validation with code taken from the Dojo Toolkit.  Problem solved!

Track.js Error Reporting

Upcoming Events

Recent Features

  • fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

  • Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for...

Discussion

  1. very nice job, excellent…

  2. Leandro Poblet

    Very nice job.

    This could also be done with HTML5, right?

    I love your blog, keep it this way!

  3. Nice, but you could go even further by verifying the checksum of the number using Luhn algorithm. ;)

    http://en.wikipedia.org/wiki/Luhn_algorithm

    • Great Post, David! :)
      Gonna use that in my new projects, thanks.

      As Adrien mentioned, you could include a Luhn algorithm check. You can read more about that here: http://www.ee.unb.ca/cgi-bin/tervo/luhn.pl and ISO-7812-1.

      I’ve implemented both checks for you. You can test the code on JSFiddle: http://jsfiddle.net/silvinci/QsHA8/12/

      The given example credit card validates.

      // Create an object
      var creditCardValidator = {
          // Pin the cards to them
          'cards': {
              'mc':    '5[1-5][0-9]{14}',
              'ec':    '5[1-5][0-9]{14}',
              'vi':    '4(?:[0-9]{12}|[0-9]{15})',
              'ax':    '3[47][0-9]{13}',
              'dc':    '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
              'bl':    '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
              'di':    '6011[0-9]{12}',
              'jcb':    '(?:3[0-9]{15}|(2131|1800)[0-9]{11})',
              'er':    '2(?:014|149)[0-9]{11}'
          },
          // Add the structure validator to them
          'validateStructure': function(value, ccType) {
              value = String(value).replace(/[^0-9]/g, ''); // ignore dashes and whitespaces - We could even ignore all non-numeric chars (/[^0-9]/g)
      
              var cardinfo = creditCardValidator.cards,
                  results  = [];
              if(ccType){
                  var expr = '^' + cardinfo[ccType.toLowerCase()] + '$';
                  return expr ? !!value.match(expr) : false; // boolean
              }
      
              for(var i in cardinfo){
                  if(value.match('^' + cardinfo[i] + '$')){
                      results.push(i);
                  }
              }
              return results.length ? results.join('|') : false; // String | boolean
          },
          // Add the Luhn validator to them
          'validateChecksum': function(value) {
              value = String(value).replace(/[^0-9]/g, ''); // ignore dashes and whitespaces - We could even ignore all non-numeric chars (/[^0-9]/g)
              
              var sum        = 0,
                  parity    = value.length % 2;
              
              for(var i = 0; i  9) {
                      digit = digit - 9; // get the cossfoot - Exp: 10 - 9 = 1 + 0 | 12 - 9 = 1 + 2 | ... | 18 - 9 = 1 + 8
                  }
                  
                  sum += digit;
              }
              
              return ((sum % 10) == 0); // divide by 10 and check if it ends in 0 - return true | false
          },
          // Apply both validations
          'validate': function(value, ccType) {
              if(this.validateChecksum(value)) {
                  return this.validateStructure(value, ccType);
              }
              return false;
          }
      };
      
      // Example
      var card   = prompt("Enter the credit card type (mc, ec, vi, ax, dc, bl, di, jcb, er)", "mc"),
          number = prompt("Enter the credit card number (default matches mc)", "5100000000000040");
      alert(creditCardValidator.validate(number, card));
      
  4. Looks pretty awesome, I might need this in the future. ;)

    I’ve decided I’m going to learn MooTools, it’s definitely more to my liking than any other framework. This blog is going to become a gold mine for me. xD

    Keep up the great writing, we all dig it.

  5. Nice work!

    Another really great credit card processor is:
    https://github.com/madrobby/creditcard_js

  6. Carlos

    Or no need for libraries (originally from http://http://developer.netscape.com/library/examples/ But URL no longer seems to work):

    function isCreditCard(st) {
    	if( st.length > 19 || 13 > st.length ) { return false; }
    	var sum = 0;
    	var mul = 1;
    	l = st.length;
    	for( var i = 0; i = 10 ) {
    			sum += (tproduct % 10) + 1;
    		} else {
    			sum += tproduct;
    		}
    		if( mul == 1 ) {
    			mul++;
    		} else {
    			mul--;
    		}
    	}
    	return ( (sum % 10) == 0 );
    }
    
    • Carlos

      Ah sorry, didn’t pay enough attention, you did provide alternative without needing Dojo.

  7. Brian

    Isn’t there an issue of trust with client side anything?

  8. Great Job, David! Really nice read.

    As Adrien mentioned, you could even include the Luhn algorithm to improve the validation.

    I’ve done this for you: http://jsfiddle.net/silvinci/84bru/

    // Create an object
    var creditCardValidator = {
        // Pin the cards to them
        'cards': {
            'mc':    '5[1-5][0-9]{14}',
            'ec':    '5[1-5][0-9]{14}',
            'vi':    '4(?:[0-9]{12}|[0-9]{15})',
            'ax':    '3[47][0-9]{13}',
            'dc':    '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
            'bl':    '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
            'di':    '6011[0-9]{12}',
            'jcb':    '(?:3[0-9]{15}|(2131|1800)[0-9]{11})',
            'er':    '2(?:014|149)[0-9]{11}'
        },
        // Add the structure validator to them
        'validateStructure': function(value, ccType) {
            value = String(value).replace(/[^0-9]/g, ''); // ignore dashes and whitespaces - We could even ignore all non-numeric chars (/[^0-9]/g)
    
            var cardinfo = creditCardValidator.cards,
                results  = [];
            if(ccType){
                var expr = '^' + cardinfo[ccType.toLowerCase()] + '$';
                return expr ? !!value.match(expr) : false; // boolean
            }
    
            for(var i in cardinfo){
                if(value.match('^' + cardinfo[i] + '$')){
                    results.push(i);
                }
            }
            return results.length ? results.join('|') : false; // String | boolean
        },
        // Add the Luhn validator to them
        'validateChecksum': function(value) {
            value = String(value).replace(/[^0-9]/g, ''); // ignore dashes and whitespaces - We could even ignore all non-numeric chars (/[^0-9]/g)
            
            var sum        = 0,
                parity    = value.length % 2;
            
            for(var i = 0; i  9) {
                    digit = digit - 9; // get the cossfoot - Exp: 10 - 9 = 1 + 0 | 12 - 9 = 1 + 2 | ... | 18 - 9 = 1 + 8
                }
                
                sum += digit;
            }
            
            return ((sum % 10) == 0); // divide by 10 and check if it ends in 0 - return true | false
        },
        // Apply both validations
        'validate': function(value, ccType) {
            if(this.validateChecksum(value)) {
                return this.validateStructure(value, ccType);
            }
            return false;
        }
    };
    
    // Example
    var valid = creditCardValidator.validate(number, card);
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Intercept HTTP Requests with Node.js nock

    Unit testing external APIs is difficult no matter what language you do it in.  Hell, working with any external API is scary, if only because you have zero control of networking issues, API changes, and a host of other issues.  But if you do create a service...

  • Introducing Frontend Masters (with Giveaway)

    Hey DWB readers, I'm super happy to sponsor this blog. I've been a long-time reader and fan, since back when David wrote about JavaScript and MooTools back in 2007. ;-) We are in one of the fastest changing, evolving, most lively communities on earth: JavaScript and front-end web...

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...