-
-
Save nimbupani/732762 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Detect Credit Card Type</title> | |
| </head> | |
| <body> | |
| <form> | |
| <label for="card_number">Enter Card Number:</label> | |
| <input type="text" name="card_number" id="card_number" value=""> | |
| <div id="card"></div> | |
| </form> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> | |
| <script> | |
| (function(window, document, $) { | |
| // Just a simple plugin... | |
| $.fn.cardType = function(opts) { | |
| var defaults = $.fn.cardType.opts; | |
| // Allow for just a callback to be provided or extend opts | |
| opts = opts && $.isFunction(opts) ? opts.callback = opts | |
| : $.extend(defaults, opts); | |
| // Chainability | |
| return this.bind('keyup', function() { | |
| // Don't need to use jQuery to get the value | |
| var num = this.value.replace(/[\s\xA0]+/g, ''), | |
| len = num.length, | |
| type = opts.unknown; | |
| // Set type based off conditions | |
| type = | |
| // Test for Visa | |
| num[0] === '4' && (len === 13 || len === 16) | |
| ? 'Visa' | |
| // Test for American Express | |
| : (num[0] === '34' || num[0] === '37') && len === 15 | |
| ? 'American Express' | |
| // Text for Mastercard - couldn't think of an elegant way to avoid the regex | |
| : /^5[1-5]/.test(num) && len === 16 | |
| ? 'Mastercard' | |
| // Test for Discover | |
| : num.indexOf('6011') === 0 && len === 16 | |
| ? 'Discover' | |
| // Default | |
| : type; | |
| // Invoke the callback, added in arguments.callee just in case you want to unbind | |
| opts.callback.apply(this, [type, num, opts, arguments.callee]); | |
| }); | |
| }; | |
| // Set defaults on the plugin function | |
| $.fn.cardType.opts = { | |
| unknown: "Type unknown", | |
| callback: $.noop | |
| }; | |
| })(this, this.document, this.jQuery); | |
| </script> | |
| <script> | |
| jQuery(function($) { | |
| $('#card_number').cardType({ | |
| callback: function(type) { | |
| $('#card').text(type); | |
| } | |
| }); | |
| // Listen for keyup on card_number field | |
| //$('#card_number').live('keyup', function(e) { | |
| // // Stop bubbling | |
| // e.stopPropagation(); | |
| // // Strip whitespace - pattern from http://bit.ly/dTLIkO | |
| // var num = $(this).val().replace(/[\s\xA0]+/g, ""), | |
| // len = num.length, | |
| // type; | |
| // // Determine card type - patterns from http://www.merriampark.com/anatomycc.htm | |
| // if ( (/^4/.test(num)) && (/^(13|16)$/.test(len)) ) { | |
| // type = 'Visa'; | |
| // } else if ( (/^(34|37)/.test(num)) && (/^15$/.test(len)) ) { | |
| // type = 'American Express'; | |
| // } else if ( (/^5[1-5]/.test(num)) && (/^16$/.test(len)) ) { | |
| // type = 'Mastercard'; | |
| // } else if ( (/^6011/.test(num)) && (/^16$/.test(len)) ) { | |
| // type = 'Discover'; | |
| // } else { | |
| // type = 'type unknown'; | |
| // } | |
| // // Replace the contents of <div id=card> with the card name. | |
| // $('#card').html(type); | |
| //}); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment