HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Validating a credit card

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
creditcardvalidating

Problem

I recently created an extension which detects the type of credit card based on the numbers entered in and formats it. I am using Luhn Algorithm for validating credit card numbers and I am using jQuery masking for formatting the credit card numbers (for reference: jquery.maskedinput-1.3.min).

You can play with the demo here.

How can I make this extensive? What should I be thinking about and what might not be so good in my current code?

```
jQuery(function($) {

// hiding the status as the user focuses on the credit card input field
$('.card input').bind('focus', function() {
$("#ccard_number").unmask();//unmasking the text field as user starts typing
$('.card .status').hide();
});

// showing the status when the user tabs or clicks away from the credit card input field
$('.card input').bind('blur', function() {
$('.card .status').show();

});

// checking input value entered using jquery.cardchecker
$('.card input').cardchecker({
callback: function(result) {

var status = (result.validLen && result.validLuhn) ? 'valid' : 'invalid',
message = '',
types = '',
i;

// Getting the names of all accepted card types.
for (i in result.option.types) {
types += result.option.types[i].name + ", ";
}
types = types.substring(0, types.length-2);

// Set the status message
if (result.len 4 ? 9 : 0) : num[i];
}
return total % 10 === 0;
},
// http://en.wikipedia.org/wiki/List_of_Bank_Identification_Numbers
types: [
{
name: 'Visa',
className: 'visa',
checkType: function(num) { return num.charAt(0) === '4'; },
checkLength: function(len) { return len === 13 || len === 16; }
},
{
name: 'American Express',

Solution

One thing that comes to mind is you could remove many lines of code by using regular expressions:

name: 'Visa',
    className: 'visa',
    checkPattern: /^4\d{12}\d{3}?$/


This means:

  • / beginning of the search pattern, required by JavaScript.



  • ^ don't match if there's anything before this pattern.



  • 4 literal number 4



  • \d{12} exactly 12 digits



  • \d{3}? optionally followed by another 3 digits



  • $ don't match if there's anything after this pattern.



  • / end of the search pattern, required by JavaScript.



Using regular expressions would allow you to replace checkLength and checkType with a single method.

Edit: cleaned up regex, thanks to @Schism.

Code Snippets

name: 'Visa',
    className: 'visa',
    checkPattern: /^4\d{12}\d{3}?$/

Context

StackExchange Code Review Q#20543, answer score: 2

Revisions (0)

No revisions yet.