creditCard validator

Validate a credit card number

Options

Use with form field

The HTML attributes are used to set the validator options via the Declarative plugin

Name HTML attribute Type Description
message data-fv-credit-card___message String The error message

Behind the scene, in addition to using the Luhn algorithm, the validator also validate the IIN ranges and length of credit card number.

It supports validating the following cards:

Type Sample Is it valid?
American Express 340653705597107
Dankort 5019717010103742
Diners Club 30130708434187
Diners Club (US) 5517479515603901
Discover 6011734674929094
Elo 6362970000457013
JCB 3566002020360505
Laser 6304 9000 1774 0292 441
Maestro 6762835098779303
Mastercard 5303765013600904
Solo 6334580500000000
Visa 4929248980295542
Visa Electron 4917300800000000

Note

13 digits Visa credit cards are no longer used and it will be treated as an invalid card number

Use with JavaScript module


// You might need to change the importing path
import creditCard from 'formvalidation/validators/creditCard';

const result = creditCard().validate({
    value: ...,
    options: {
        message: ...,
    },
});
/*
result is an object of
{
    valid: true or false,
    message: The error message,
    meta: {
        // The type of credit card
        // Can be null or one of AMERICAN_EXPRESS, DINERS_CLUB, DINERS_CLUB_US, DISCOVER, JCB, LASER,
        // MAESTRO, MASTERCARD, SOLO, UNIONPAY, VISA
        type: ...
    }
}
*/

Tip

You can use www.getcreditcardnumbers.com to generate fake credit card numbers

Basic Example

Asking credit card number to match with selected type

The following form asks to fill in the valid credit card number which matches the selected type.

Showing card icon

The following example shows credit card icon provided by Font Awesome based on the card type.

Card type Icon CSS class
American Express fa fa-cc-amex
Discover fa fa-cc-discover
Visa fa fa-cc-visa
Mastercard fa fa-cc-mastercard
Other fa fa-credit-card

Tip

PaymentFont and Payment Webfont provide more payment icons

Accept test credit card numbers

Do you want some of fake, even invalid credit card numbers to be valid? For example, in the developing phase, you might want the creditCard validator to accept a few of particular card numbers.

Of course, you don't need to modify the source code of creditCard validator and add your own numbers there. FormValidation allows you to do it in a nice way via the Transformer plugin.

By using this option, we transform your test card numbers from an invalid to a valid one.

Note

The Transformer plugin changes the card numbers for validation process only. When the form is submitted, you get the extract number that is initially provided by the user

Test (invalid) credit card numbers that you want it to be valid:

  • 3333222233332222
  • 30030008444444

Module Example

The following snippet shows how to use the creditCard validator with JavaScript module:


// You might need to change the importing path
import creditCard from 'formvalidation/validators/creditCard';

const res1 = creditCard().validate({
    value: '340653705597107',
    options: {
        message: 'The credit card number is not valid',
    },
});
// res1.valid === true
// res1.meta.type === 'AMERICAN_EXPRESS'

const res2 = creditCard().validate({
    value: '5303765013600',
    options: {
        message: 'The credit card number is not valid',
    },
});
// res2.valid === false
// res2.meta.type === null

Related validators

The following validators are similar to this one and might be useful to you.

Name Description
bic Validate a BIC (Business Identifier Codes)
iban Validate an International Bank Account Number (IBAN)
rtn Validate a RTN (Routing transit number)