2021
Card Number Formatting using jquery
Card Types -
So to start from , there are different types of card available around the world and some use there own format which can be different than others. Some of those Cards are these
Amex(American Express) - 371449635398431
MasterCard - 5200828282828210
VISA - 4000056655665556
So, you can see some difference in the formatting across cards and so it becomes tough to implement correct formatting while the user types the card number. So for implementing that we will take one input box and add some script on page
<div class="col-md-6" style="padding:50px;"> <input type="text" id="txtcard" onkeypress="return formatCardNumber(event)" /> </div> <script> var defaultFormat = /(?:^|\s)(\d{4})$/; var cards = [ { type: 'maestro', patterns: [5018, 502, 503, 506, 56, 58, 639, 6220, 67], format: defaultFormat, length: [12, 13, 14, 15, 16, 17, 18, 19], cvcLength: [3], luhn: true }, { type: 'forbrugsforeningen', patterns: [600], format: defaultFormat, length: [16], cvcLength: [3], luhn: true }, { type: 'dankort', patterns: [5019], format: defaultFormat, length: [16], cvcLength: [3], luhn: true }, { type: 'visa', patterns: [4], format: defaultFormat, length: [13, 16], cvcLength: [3], luhn: true }, { type: 'mastercard', patterns: [51, 52, 53, 54, 55, 22, 23, 24, 25, 26, 27], format: defaultFormat, length: [16], cvcLength: [3], luhn: true }, { type: 'amex', patterns: [34, 37], format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/, length: [15], cvcLength: [3, 4], luhn: true }, { type: 'dinersclub', patterns: [30, 36, 38, 39], format: /^(\d{4}|\d{4}\s\d{6})$/, length: [14], cvcLength: [3], luhn: true }, { type: 'discover', patterns: [60, 64, 65, 622], format: defaultFormat, length: [16], cvcLength: [3], luhn: true }, { type: 'unionpay', patterns: [62, 88], format: defaultFormat, length: [16, 17, 18, 19], cvcLength: [3], luhn: false }, { type: 'jcb', patterns: [35], format: defaultFormat, length: [16], cvcLength: [3], luhn: true } ]; var formatCardNumber = function (e) { var $target, card, digit, length, re, upperLength, value; digit = String.fromCharCode(e.which); if (!/^\d+$/.test(digit)) { return; } $target = $(e.currentTarget); value = $target.val(); debugger; card = cardFromNumber(value + digit); length = (value.replace(/\D/g, '') + digit).length; if (length > Math.max.apply(null, card.length)) { return false; } upperLength = 16; if (card) { upperLength = card.length[card.length.length - 1]; } if (length >= upperLength) { return; } if (($target.prop('selectionStart') != null) && $target.prop('selectionStart') !== value.length) { return; } if (card && card.type === 'amex') { re = /^(\d{4}|\d{4}\s\d{6})$/; } else { if (card != null && card != undefined) { re = card.format// /(?:^|\s)(\d{4})$/; } else { re = /(?:^|\s)(\d{4})$/; } } if (re.test(value)) { e.preventDefault(); return setTimeout(function () { return $target.val(value + ' ' + digit); }); } else if (re.test(value + digit)) { e.preventDefault(); return setTimeout(function () { return $target.val(value + digit + ' '); }); } }; var cardFromNumber = function (num) { var card, p, pattern, _i, _j, _len, _len1, _ref; num = (num + '').replace(/\D/g, ''); for (_i = 0, _len = cards.length; _i < _len; _i++) { card = cards[_i]; _ref = card.patterns; for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) { pattern = _ref[_j]; p = pattern + ''; if (num.substr(0, p.length) === p) { return card; } } } }; </script>
So, this code is using jquery so make sure you have added the jquery reference on the page before using this. So, about this script in this we have added some predefined card formats in the array along with there max character size. And we are calling formatCardNumber on keypress of input box. Which find the card type based on starting characters and format accordingly. You can see the output with different card number and output format
With MasterCard
With Visa card Format
With Amex Card Format
So, you can see the formatting working differently with different card types. So this is how we can implement Card Number formatting with Jquery. If you have any issues you can comment and ask.