Discussion on CardCheck Credit Card Validator and Type Guesser

eclarian

eclarian does not currently provide support for this item.

14 comments found.

Good job.

as I can put a button and clicking newly verify if the card is valid?

Thanks @James021 for the purchase!

Are you asking for a way for the end user to click a button to verify their credit card? For example,

$(’#credit-card-button’).click(function() { $.cardcheck.isValid(’#credit-card’); });

The plugin currently doesn’t support this public method, but it might be a good idea for a future release. Is this what you are looking for?

I like it a lot! Nice and refreshing item.

Quick question about the validation, are you validating purely on have 16 digits or are you using the mod10 algorithm?

Thanks! We use both a mod10 algorithm and RegExp in the validation. Basically, the events go as follows for validation:

We check if the input meets the max number of digits for the certain type. Since some cards have multiple lengths (JCB has both 15 and 16 length cards), we don’t fail right away if there is still a higher number. If it is the highest number for that type, it must first pass the regular expression to match the proper pattern for the credit card and then it must pass the mod10 algorithm. If it doesn’t match any and is beyond the max of the current type, then we fail.

So if it passes the length, RegExp, and mod10, then we consider it to be a valid credit card number. Does that make sense?

Perfect and Purchased! :)

Hey there, I have a pre-existing form I’d like to install this on. However I think the form may already be using Javascript, and I worry that the two scripts might conflict.

Would you be willing to take a look at my form and install this validator into it for an additional fee?

Thanks.

Sure, no problem. Sorry for the delay in our response. Please send us an email at eclarian@eclarian.com with the info.

Thanks!

Hi, validator work properly if put 17 numbers for visa it calback error but if I put 15 numbers or less validation pass OK.

@vjeko11 It won’t error out at 15 because Visa cards can be either 13 or 16 characters in length. It will not validate at 14 or 15 characters, but it won’t error out either because it is waiting for more input.

We didn’t want to scare the user when they’re entering their 16 digit card and it is suddenly throwing up a red flag after 13 characters.

Make sense?

Why need the folder ‘vendor’? Thx

You don’t actually need the vendor folder to utilize card check. It is in there just for the documentation to make the style the code.

Demo version and version for buy different: in version for buy does not include Maestro Card. Please update. Thx

Maestro Card is in the 2.0.0 version

Don´t work with newest jquery! ... how can I fix it?

Thanks

We’ve updated version 2.0.0 to work with jQuery 1.9.1 and 2.0.0

Need that checkNow kind of method James021 was talking about. Its not working in some android devices. The onValidation does not fire at all in some.

This can now be achieved in Version 2.0.0 with calling $(‘selector’).cardcheck(‘evaluate’); when $(‘selector’).cardcheck(); has already run.

Can you/I add other card types? I’m creating a shopping cart that many people from all over will be using.

Can you provide more credit card images?

Thanks

also the cardcheck.min.js file in the js folder is version 1.0.0

I have a problem with it not detecting the Maestro card numbers properly. It is defaulting to Mastercard.

Also how can I hide the card icons if the start number does not match a card I have listed?

Hi, thank you for the nice script. its working perfect.

I have implemented your script into a form with a reset button > input type=’reset’ value=’Reset’ name=’reset’

..how do i make your script reset using onclick in the reset button

You’ll want to use a function like the one below. Just call “resetCCInput()” within a click event tied to the reset button and pass in the jQuery object of the input node you instantiated cardcheck on.

// $el is a jQuery object around the input that cardcheck was tied to var resetCCInput = function ($el) { $el.val("").cardcheck("instance").cardNumber(""); };

Hi There,

I am having an issue with the niceName argument being undefined in a few of the callbacks.

I have initialized cardcheck on an input and am typing in the Visa test credit card number provided in the docs. Below is my code (which is very similar to the code provided in the docs), and below that is the console output.

Code

var $cardWrapper = jQuery('.cardcheck'),
    $cardInput   = $cardWrapper.find('.cardcheck__input'),
    $cardMessage = $cardWrapper.find('.cardcheck__message'),
    origMessage  = $cardMessage.text();

$cardInput
    .on('cc:onReset', function() {
        console.log('reset');
        $cardMessage.removeClass('success warning error').text(origMessage);
    })
    .on('cc:onGuess', function(event, card, niceName) {
        console.log('guess: ' + card +', ' + niceName);
        $cardMessage.addClass('warning').text('Please enter your entire ' + niceName + ' card number.');
    })
    .on('cc:onInvalid', function(event, card, niceName) {
        console.log('invalid: ' + card +', ' + niceName);
        $cardMessage.removeClass('success warning').addClass('error').text('Your ' + niceName + ' card number is invalid.');
    })
    .on('cc:onValid', function(event, card, niceName) {
        console.log('valid: ' + card +', ' + niceName);
        $cardMessage.removeClass('warning error').addClass('success').text('Your ' + niceName + ' card number appears to be valid.');
    })
    .on('cc:onCardChange', function(event, card, niceName) {
        console.log('change: ' + card +', ' + niceName);
        $cardMessage.addClass('warning').text('Please enter your entire ' + niceName + ' card number.');
    })
    .cardcheck({ 
        acceptedCards: [
            'visa',
            'mastercard',
            'amex',
            'discover'
        ],
        iconLocation: '.cardcheck__cards',
    });

Console Output

change: visa, Visa
guess: visa, undefined
valid: visa, Visa
guess: visa, undefined
valid: visa, Visa
guess: visa, undefined
valid: visa, Visa
guess: visa, undefined
change: null, 
reset

Please advise.

This is a bug. I’ve submitted an update to CodeCanyon.

If you want to patch it right now, if you go to line 417-421 of cardcheck.js you should see something similar to the following. Just replace that section with the code below

return this.onUnknown(function(card, niceName) {
    if (card) {
        callback(card, niceName);
    }
});

Thank you for taking care of it. Works like a charm.

Excellent!

hi i a have add your script in my form big problemme 1 even the card is not valid when i click submit it submit so why do i need this if i collect a wrong credit number

2 the icon not shox i have send the folder images and js and css

The cardcheck plugin will not automatically prevent a form from submitting if the card is invalid. You need to implement your own logic to disable your form. You can do that by hooking into the onInvalid event.

$('#credit-card').on('cc:onInvalid', function(event) {});

Also register for the onValid event to be able to re-enable the form.

$('#credit-card').on('cc:onValid', function(event, card, niceName) {});

As for the images, just make sure they are in `images/visa.png` relative to the current domain and directory. If you want to move them, you can change the image directory to wherever you’ve located them when initializing the plugin by passing the following option:

{ iconDir: "http://www.example.com/images/" }

Very Nice Work :)

by
by
by
by
by
by