paweldecowski / jquery-creditcardvalidator Goto Github PK
View Code? Open in Web Editor NEWjQuery credit card validation and detection plugin
Home Page: jquerycreditcardvalidator.com
License: MIT License
jQuery credit card validation and detection plugin
Home Page: jquerycreditcardvalidator.com
License: MIT License
Visa: 4222222222222 *
Diners: 38555565010005 & 38520000023237
*Note : Even though this number has a different character count than the other test numbers, it is the correct and functional number.
Those numbers are valid and the validator will not consider them so.
Thanks.
Hi. Nice work on the library. But this really shouldn't be a jquery plugin.
The library should expose a function such as validate()
, then let users bind that to the input changes and do whatever with it. There's really no need to have to require jquery to use it.
I'm trying to do something very much like your demo but for some reason when I attempt to add Amex support it typically displays as Discover.
Seems like your fancy syntax highlighting is preventing this from happening. Would be amazing to add some copy and pastable examples to your site, or at least in github.
$(this).unbind('keyup');
This line is evil, it breaks other code relying on that event, such as form validation library Parsley.
Any chance to add this to npm?
I think it would be good to add support to universal module patterns such as amd and commonjs
more info about at: https://github.com/umdjs/umd
line 188 : return number.replace(/[ -]/g, '');
i have got this error , what it might be :S
I would like to suggest that the events be refactored from .bind to .delegate (or .on with jQuery 1.7).
Delegate Docs
http://api.jquery.com/delegate/
.On Docs
http://api.jquery.com/on/
Cool script, sadly missing something very crucial, validating the CCV to the credit card number. Or am I missing something and not seeing it anywhere.
Hi,
I just noticed that the regex in some cases seems to be incomplete (e.g. visa).
Please have a look in a few resources regarding the propper regex:
http://stackoverflow.com/questions/9315647/regex-credit-card-number-tests
http://www.regular-expressions.info/creditcard.html
Regards,
Chris
It means that whichever is matched first will be returned for the prefixes 54 and 55 (currently Diners Club US & CA).
Any idea of having support for ELO Credit Card
?
All good
Add the input to the event so you can reference it easily from within the function enclosure for the event:
validate_number = function(inp, number) {
var length_valid, luhn_valid;
card_type = get_card_type(number);
luhn_valid = false;
length_valid = false;
if (card_type != null) {
luhn_valid = is_valid_luhn(number);
length_valid = is_valid_length(number, card_type);
}
return callback(inp, {
card_type: card_type,
luhn_valid: luhn_valid,
length_valid: length_valid
});
};
validate = function() {
var number;
number = normalize($(this).val());
return validate_number(this, number);
};
An option to automatically add the spaces to the card numbers to reflect the spacing on a credit card, i.e. Visa "4444 1234 1234 1234", AMEX "4747 123456 12345"
Since the functionality is mostly driven by events (input
or keyup
), it would make sense to emit events such as a creditcard.valid
event that you could listen for.
This would also allow you to separate the <input>
from the controller or event handler and pass context using event targets.
Fantastic work on this!
Currently there are three properties which indicate results of three different aspects of validation:
card_type
— whether the card prefix has been recognised (regardless of the below being valid or not)luhn_valid
— whether the Luhn checksum is validlength_valid
— whether the length of the card number is valid for the type of cardHaving this breakdown is useful to provide the user the exact reason why the card number is invalid. For example:
However, in some cases all the developer needs to know is the combined result of validation, ie if all three validation tests were successful.
To indicate it, I propose adding a valid
parameter which is set to true
only if all validation tests have passed, and set to false
otherwise.
The developer won’t have to check two properties anymore (two, because card_type
doesn’t need to be checked — luhn_valid
and length_valid
are always false
if card type is not recognised):
if (result.luhn_valid && result.length_valid) {
// ...
}
Instead the developer will be able to do:
if (result.valid) {
// ...
}
Hello, i did tests with this amex cards:
3700 000000 00002 - amex
372176090165471 - amex
I found this values in this sites:
http://jsfiddle.net/ipsjolly/9whmL9u0/
https://creditcardjs.com/
Thanks for support.
Please tag a release
To make development easier there should be some examples. That way contributors don’t have to write their own to test new features/bugfixes.
in one of our apps, we encountered a particular maestro number which failed the validation. but the same number passes validation at this site (http://www.freeformatter.com/credit-card-number-generator-validator.html)
i can provide the card number for investigation.
This great plugin misses the amex icon, it would be great if you add it.
Cheers
Uncaught TypeError: Cannot read property 'replace' of undefined - line 188 jquery.creditCardValidator.js
I'm loading:
jquery-1.11.3.min.js
jquery-ui-1.11.4/jquery-ui.min.js
then loading:
jquery.creditCardValidator.js
Get an error on that basic setup.
We have got an email from our payment gateway provider saying there is a change in master card BIN, mastercards will also start with "2" from now onwards.
the current validator does not support this :(
Thanks
Hi,
As soon as I start to enter an amex card number, nothing happens. In this case, card starts with 37....
I tried writing the basic option myself as well as used the code from your demo page but I cannot get the accept parameter to work.
On your demo page, you specified not to accept Diners, so I figured that would be a good one to try. If you try the number 30569309025904 (taken from http://www.validcreditcardnumber.com), there is no front-end feedback that it is not accepted. How would I be able to do this?
Also, I'm using jQuery Validator to validate the rest of my form, is there a way to tie your plugin in? I need to only allow VISA and Mastercard on my form.
Thanks!
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library PawelDecowski/jQuery-CreditCardValidator
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "PawelDecowski/jQuery-CreditCardValidator",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Need to verify if always the case and add to the list.
Hi,
It seems like AMEX cards are not recognised as AMEX and are not validated properly. I have tried my real amex on http://jquerycreditcardvalidator.com as well as the test numbers from http://www.freeformatter.com/credit-card-number-generator-validator.html
There is a bug in the 81:
--->> digit = _ref[n]; <<--
In Internet Explorer 7, as it uses EcmaScript 3, it is not possible to read string's chars as it were an array. The solution is just to use "charAt" method, so:
--->> digit = _ref.charAt(n); <<--
Regards
JCB is considered a major credit card brand in Asia. It'd be great if you could add support for it.
The regex rule for detecting JCB is:
^(?:2131|1800|35\d{3})\d{11}$
JCB cards beginning with 2131 or 1800 have 15 digits. JCB cards beginning with 35 have 16 digits.
Source: http://www.regular-expressions.info/creditcard.html
PS: This script hasn't been updated in 2 years .. are you still maintaining it?
The documentation states that the object passed to the callback function contains card_type
property which contains "one of the strings describing the card type" (or null
). However, this is not the case. The card_type
property refers to the matching object from the card_types
array.
This doesn't seem a major problem, but either the documentation should be changed, or the implementation should be changed to return card_type.name
(personally I think it would be better to change the implementation as there is likely to be little need for the pattern
and valid_length
properties which are currently also returned).
it was last updated 2 years ago, and many issues are pending, i want to use it in my project confused whether to use it or not?
ie11 - windows8
Method get_card_type returns always null, preventing to detect the card type
commenting the lines below seems to fix the problem
this.on('input.jccv', (function(_this) {
return function() {
$(_this).off('keyup.jccv');
return callback.call(_this, validate());
};
})(this));
I've tried several test AMEX numbers, both in my form, and the demo form on your site. None of them seem to validate. Here are a few test numbers I've tried. These test numbers are from various web sites offering numbers for testing. Other card test (VISA MasterCard, Discover) numbers work fine.
341111111111111
378282246310005
378734493671000
34343434343434
349615762874365
It is not possible to set a list of acceptable card types, if the card type not in the list card will be invalid.
I think it shouldn't dim Visa Electron until you've typed enough of the number to rule it out (e.g. 40 could be either Visa). Via http://www.reddit.com/r/programming/comments/21uf5h/how_to_correctly_detect_credit_card_type/cggwbg1
In older version i found some trigger function to check the card is valid or invalid
$(this).trigger('creditcard.validation', validationResult);
if (card_type && luhn_valid && length_valid) {
$(this).trigger('valid.creditcard.validation', validationResult);
} else {
$(this).trigger('invalid.creditcard.validation', validationResult);
}
i do not find this in latest version, i need this trigger in latest, how can i do it ?
Im a web developer. Im Not so competent in jquery or javascript.
I have a HTML form (below) to collect payment details. I want to validate the Card entered.
Is it possible for you guys to tell me how to embed the scripts and link to the form?
Is there any sample that is a html page with a sample form and the files included. So i can just copy and paste it in straight away. I want it exactly the way you have displayed it on your home page.
Hope you can help.
Thanks in advance.
Zohaib
HTML CODE
<form action="submit_card_details.php" method = "post">
<input type="text" name="nameOnCard" size="28">
<input type="text" name="cardNumber" size="16">
<input type="text" name="expiry" size="5">
<input type="text" name="cvv" size="3">
</form>
Start from Oct 2016 Mastercard is introducing a new range of numbers with the following first 6 digits range, 222100-272099
please add it up
any plans to differentiate between the two - UK user here and it's needed
also I think Maestro no longer requires start date / issue number - here in the UK at least
Hi,
Having a bit of trouble identifying American Express cards. As well as my real card number some of these test amex numbers dont seem to work:
http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm
according to:
http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm
38520000023237 - is a correct diner's club number...
the regex "3(?:0[0-5]|[68][0-9])[0-9]{11}" seems to do the job, 14 digits.
apparently the card can start with 36 or 38 not only 300-305.
...Thanks a lot for everything so far. Works great. Maybe just add a 13 digit option for the Visa. :)
first , I enjoyed the plugin and you guys are to be congratulated . As a suggestion , you guys can put a validation for the Aura card
Please include those pretty graphics for all card types you handle and include in your sample CSS.
http://jquerycreditcardvalidator.com/card_logos.png
We would be able to pay $50 for this request if you could complete by 5/15/2013. Please email me for billing details. Also, could you please include an explicit license file in your source tree.
These two VISA numbers are provided as Test card numbers with Authorize.net:
They're valid according to the PHP Luhn check code
function is_valid($number) {
$cardNumber = strrev($number);
$numSum = 0;
for ($i=0; $i<strlen($cardNumber); $i++) {
$currentNum = substr($cardNumber, $i, 1);
// Double every second digit
if ($i % 2 == 1) {
$currentNum *= 2;
}
// Add digits of 2-digit numbers together
if ($currentNum > 9) {
$firstNum = $currentNum % 10;
$secondNum = ($currentNum - $firstNum) / 10;
$currentNum = $firstNum + $secondNum;
}
$numSum += $currentNum;
}
// If the total has no remainder it's OK
return ($numSum % 10 == 0);
}
but not when you try them on http://jquerycreditcardvalidator.com
My customer says he tried twice to enter his Mastercard number, and the function kept choosing "AmEx" as his card type.
We did have the acceptable cc types restricted to the major four, so maybe the customers c.c. was some obscure type of Mastercard (like a diners card?) that didn't evaluate to Mastercard.
I dont have the full number, and also wouldn't be able to post it anyway but here is some info about it:
billingState: "IL"
exMonth: "1"
exYear: "2015"
ccNumber: "XXXX7338"
ccType: "American Express" (this is the part that he did not input. the system gave it wrongly to him).
Where can I download the source code of the demo? Thanks in advance
In http://paweldecowski.github.com/jQuery-CreditCardValidator/
People will click on the card and think that in a radio button. Consider moving that after the card number.
Also, I tried inputting an invalid number and nothing happened. Was the box supposed to turn red or something?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.