Customizable Card Number Validation Plugin with jQuery - ForceCardNumber

Force Banking Number is a simple-to-use jQuery plugin helps you create an user-friendly debit/credit card input with card number validation.

Features:

• Custom numbers alignment.
• Custom max length of digits.
• Custom number of digits.
• Custom character separator.
• 10+ built-in card validation rules: AmericanExpress, DinersClubCarteBlanche, JCB, Laser, VisaElectron, Visa, Dankort, InterPayment, MasterCard, Maestro, Discover

How to use it:

1. Include jQuery library and the jQuery Force Card Number plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.forceCardNumber.js"></script>

2. Create a text field for the debit/credit card input.

<input type="text" id="demo">

3. Initialize the plugin with default settings.

$("#demo").ForceCardNumber();

4. Parameters:

// Align text on input [ left | center | right ]
align: 'left',

// Max length for input field [Integer number],
length: null,

// If existe decimal part [ true | false ]
separatorGroup: true,

// Character for separator group [ character ]
charSeparator: " ",

// Number digits for group [Integer number]
digitsGroup: 4,

// If click in input clear field [ true | false ]
clearOnClick: true,

// If it is possible to cut copy paste [ true | false ]
blockCutCopyPaste: true

// Card list for validade [ array | string ] { AmericanExpress | DinersClubCarteBlanche | JCB | Laser | VisaElectron | Visa | Dankort | InterPayment | MasterCard | Maestro | Discover }
cardsValidate: null,

// Enable or disable the validation card
validateCard: true,

5. Callbacks:

// Callback for card is valid [ function() {} ]
onSuccessValidate: null,

// Callback for card is not valid [ function() {} ]
onErrorValidate: null,

// Callback for keyUp [ function() {} ]
onkeyUp: null

6. Pre-defined card list and regex rules.

AmericanExpress: {
  type: "CreditCard",
  regex: /^3[47]/,
  length: [15]
},
DinersClubCarteBlanche: {
  type: "CreditCard",
  regex: /^30[0-5]/,
  length: [14]
},
JCB: {
  type: "CreditCard",
  regex: /^35(2[89]|[3-8][0-9])/,
  length: [16]
},
Laser: {
  type: "CreditCard",
  regex: /^6(304|7(71|0[69]))/,
  length: [16, 17, 18, 19]
},
VisaElectron: {
  type: "DebitCard",
  regex: /^4(17500|(026|405|508|844|91[37]))/,
  length: [16]
},
Visa: {
  type: "CreditCard",
  regex: /^4/,
  length: [13, 16]
},
Dankort: {
  type: "CreditCard",
  regex: /^5019/,
  length: [16]
},
InterPayment: {
  type: "CreditCard",
  regex: /^636/,
  length: [16, 17, 18, 19]
},
MasterCard: {
  type: "CreditCard",
  regex: /^5[1-5]/,
  length: [16]
},
Maestro: {
  type: "DebitCard",
  regex: /^(0604|5(0(18|20|38)|612|893)|6(3(04|90)|7(59|6[1-3])))/,
  length: [12, 13, 14, 15, 16, 17, 18, 19]
},
Discover: {
  type: "CreditCard",
  regex: /^6(011|5|4[4-9]|22(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]))/,
  length: [16]
},

Change logs:

v1.4 (2014-11-15)

• Added new parameter "validateCard" * Updated verify callback and arrays

2014-10-13

• Added new parameter "blockCutCopyPaste" * Added new method "destroy"
• Rename plugin to "ForceBankingCard"

---

This awesome jQuery plugin is developed by NelsonBN. For more Advanced Usages, please check the demo page or visit the official website.