Created
December 8, 2010 00:47
-
-
Save tbranyen/732717 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) ? (defaults.callback = opts, defaults) | |
| : $.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, | |
| // Set type based off conditions | |
| type = opts.types[num[0]] || opts.unknown; | |
| // Invoke the callback, arguments.callee added for unbinding ability | |
| opts.callback.apply(this, [type, num, opts, arguments.callee]); | |
| }); | |
| }; | |
| // Set defaults on the plugin function | |
| $.fn.cardType.opts = { | |
| unknown: "Type unknown", | |
| callback: $.noop, | |
| types: { | |
| 4: 'Visa', | |
| 3: 'American Express', | |
| 5: 'Mastercard', | |
| 6: 'Discover' | |
| } | |
| }; | |
| })(this, this.document, this.jQuery); | |
| </script> | |
| <script> | |
| jQuery(function($) { | |
| $('#card_number').cardType(function(type) { | |
| $('#card').text(type); | |
| }); | |
| //$('#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> |
Found one bug after testing, callback.apply needed to be opts.callback.apply... YAHTZEE
To make this really happy, the event should be a named function instead of anonymous and arguments.callee should be swapped for the function reference.
Fixed bug with setting callback in opts.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Have not tested this, just an idea!