patternjavascriptMinor
Validating a credit card
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',
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:
This means:
Using regular expressions would allow you to replace
Edit: cleaned up regex, thanks to @Schism.
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.