tbranyen/$.fn.cardInfo

## $.fn.cardInfo
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Detect Credit Card Type</title>
  <style type="text/css">

#cards, #statuses {
  padding-left: 5px;
}

#cards .card, #statuses .status {
  display: none;
}

  </style>

</head>

<body>

  <form>
    <label for="card_number">Enter Card Number:</label>
    <input type="text" name="card_number" id="card_number" value="">
    <span id="cards">
      <img class="card visa" src="visa.png">
      <img class="card mastercard" src="mastercard.png">
      <img class="card amex" src="amex.png">
      <img class="card discover" src="discover.png">
    </span>
    <span id="statuses">
      <img class="status valid" src="valid.jpg">
      <img class="status invalid" src="invalid.gif">
    </span>
  </form>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

  <script>
    (function(window, document, $) {

        $.fn.cardInfo = function(opts) {

            var defaults = $.fn.cardInfo.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() {

                var num = this.value.replace(/\D+/g, ''),
                    len = num.length,
                    type = opts.types[num[0]] || opts.unknown,
                    isValidLen = function(type, len) {
                        if (type === 'Visa') {
                            return len === 13 || len === 16;
                        }
                        else if (type === 'American Express') {
                            return len === 15;
                        }
                        else if (type === 'Mastercard') {
                            return len === 16;
                        }
                        else if (type === 'Discover') {
                            return len === 16;
                        }
                        else {
                            return false;
                        }
                    },
                    isValidNum = function(num, len) {
                        // http://en.wikipedia.org/wiki/Luhn_algorithm
                        num = num.split('').reverse();
                        if (!len) {
                            return false;
                        }
                        var total = i = 0;
                        for (; i < len; i++) {
                            num[i] = window.parseInt(num[i], 10);
                            total += i % 2 ? 2 * num[i] - (num[i] > 4 ? 9 : 0) : num[i];
                        }
                        return (total % 10 === 0);
                    };

                // Invoke the callback, arguments.callee added for unbinding ability
                opts.callback.apply(this, [type, isValidLen, isValidNum, num, opts, arguments.callee]);
            });
        };

        // Set defaults on the plugin function
        $.fn.cardInfo.opts = {
            unknown: "",
            callback: $.noop,
            types: {
                4: 'Visa',
                3: 'American Express',
                5: 'Mastercard',
                6: 'Discover'
            }
        };

    })(this, this.document, this.jQuery);
  </script>

  <script>
    jQuery(function($) {
        var selectors = {
          'Visa': '.visa',
          'American Express': '.amex',
          'Mastercard': '.mastercard',
          'Discover': '.discover'
        };

        $('#card_number').cardInfo({
            callback: function(type, isValidLen, isValidNum) {

                // Show card
                $('#cards').find('.card').hide().filter(selectors[type]).show();

                // Show validity
                if (isValidLen() === true) {
                    console.log('is valid length');
                    var status = isValidNum() ? '.valid' : '.invalid';
                    $('#statuses').find('.status').hide().filter(status).show();
                }
            }
        });
    });
  </script>

</body>

</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Detect Credit Card Type</title>
	<style type="text/css">

	#cards, #statuses {
	padding-left: 5px;
	}

	#cards .card, #statuses .status {
	display: none;
	}

	</style>

	</head>

	<body>

	<form>
	<label for="card_number">Enter Card Number:</label>
	<input type="text" name="card_number" id="card_number" value="">
	<span id="cards">
	<img class="card visa" src="visa.png">
	<img class="card mastercard" src="mastercard.png">
	<img class="card amex" src="amex.png">
	<img class="card discover" src="discover.png">
	</span>
	<span id="statuses">
	<img class="status valid" src="valid.jpg">
	<img class="status invalid" src="invalid.gif">
	</span>
	</form>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

	<script>
	(function(window, document, $) {

	$.fn.cardInfo = function(opts) {

	var defaults = $.fn.cardInfo.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() {

	var num = this.value.replace(/\D+/g, ''),
	len = num.length,
	type = opts.types[num[0]] \|\| opts.unknown,
	isValidLen = function(type, len) {
	if (type === 'Visa') {
	return len === 13 \|\| len === 16;
	}
	else if (type === 'American Express') {
	return len === 15;
	}
	else if (type === 'Mastercard') {
	return len === 16;
	}
	else if (type === 'Discover') {
	return len === 16;
	}
	else {
	return false;
	}
	},
	isValidNum = function(num, len) {
	// http://en.wikipedia.org/wiki/Luhn_algorithm
	num = num.split('').reverse();
	if (!len) {
	return false;
	}
	var total = i = 0;
	for (; i < len; i++) {
	num[i] = window.parseInt(num[i], 10);
	total += i % 2 ? 2 * num[i] - (num[i] > 4 ? 9 : 0) : num[i];
	}
	return (total % 10 === 0);
	};

	// Invoke the callback, arguments.callee added for unbinding ability
	opts.callback.apply(this, [type, isValidLen, isValidNum, num, opts, arguments.callee]);
	});
	};

	// Set defaults on the plugin function
	$.fn.cardInfo.opts = {
	unknown: "",
	callback: $.noop,
	types: {
	4: 'Visa',
	3: 'American Express',
	5: 'Mastercard',
	6: 'Discover'
	}
	};

	})(this, this.document, this.jQuery);
	</script>

	<script>
	jQuery(function($) {
	var selectors = {
	'Visa': '.visa',
	'American Express': '.amex',
	'Mastercard': '.mastercard',
	'Discover': '.discover'
	};

	$('#card_number').cardInfo({
	callback: function(type, isValidLen, isValidNum) {

	// Show card
	$('#cards').find('.card').hide().filter(selectors[type]).show();

	// Show validity
	if (isValidLen() === true) {
	console.log('is valid length');
	var status = isValidNum() ? '.valid' : '.invalid';
	$('#statuses').find('.status').hide().filter(status).show();
	}
	}
	});
	});
	</script>

	</body>

	</html>