paweldecowski / jquery-creditcardvalidator Goto Github PK

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?

To make development easier there should be some examples. That way contributors don’t have to write their own to test new features/bugfixes.

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

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 valid
• length_valid — whether the length of the card number is valid for the type of card

Having this breakdown is useful to provide the user the exact reason why the card number is invalid. For example:

• Card type not recognised.
• Card number appears to be invalid.
• Card number length for Visa must be 16 characters.

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) {
    // ...
}

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?

$(this).unbind('keyup');

This line is evil, it breaks other code relying on that event, such as form validation library Parsley.

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!

Hey, maintainer(s) of PawelDecowski/jQuery-CreditCardValidator!

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!

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

Hi,

As soon as I start to enter an amex card number, nothing happens. In this case, card starts with 37....

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.

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).

This great plugin misses the amex icon, it would be great if you add it.

Cheers

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"

Need to verify if always the case and add to the list.

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

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

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.

Please tag a release

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>

It is not possible to set a list of acceptable card types, if the card type not in the list card will be invalid.

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. :)

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);
    };

Where can I download the source code of the demo? Thanks in advance

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.

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

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.

It means that whichever is matched first will be returned for the prefixes 54 and 55 (currently Diners Club US & CA).

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));

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

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?

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

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).

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 ?

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.

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

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

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:

• Visa Test Card: 4007000000027
• Second Visa Test Card: 4012888818888

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

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.

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/

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!

Any chance to add this to npm?

All good

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

Any idea of having support for ELO Credit Card?

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.

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.

line 188 : return number.replace(/[ -]/g, '');
i have got this error , what it might be :S

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