Validate Credit Cards with JavaScript

Discussion

1. Avi

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

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

   http://en.wikipedia.org/wiki/Luhn_algorithm
• Jan Buschtöns

  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. Daquan Wright

   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. Louis Galipeau

   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. Jan Buschtöns

   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);
   
9. Shawn

   All these are cool. To bad they ALL miss validating the CCV to the number That’s important, ya know?