FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

creditCard validator

Validate a credit card number

Validators

Options

Option HTML attribute Type Description
message data-fv-creditcard-message String The error message
When setting options via HTML attributes, remember to enable the validator by setting data-fv-creditcard="true".
The message option can be updated on the fly via the updateMessage() method
Looking at this example if you want to validate credit card expiration date

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 Example Result
American Express 340653705597107
Dankort 5019717010103742
Diners Club 30130708434187
Diners Club (US) 5517479515603901
Discover 6011734674929094
Elo 6362970000457013
Forbrugsforeningen
JCB 3566002020360505
Laser 6304 9000 1774 0292 441
Maestro 6762835098779303
Mastercard 5303765013600904
Solo 6334580500000000
Unionpay
Visa 4929248980295542
Visa Electron 4917300800000000
13 digits Visa credit cards are no longer used and it will be treated as an invalid card number.
If you use Stripe API for the payment form, take a look at the Validating custom Stripe form example

Examples

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

Basic example

<form id="creditCardForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Credit card number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="cc" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#creditCardForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            cc: {
                validators: {
                    creditCard: {
                        message: 'The credit card number is not valid'
                    }
                }
            }
        }
    });
});
</script>
<form id="creditCardForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-sm-3 control-label">Credit card number</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="cc"
                data-fv-creditcard="true"
                data-fv-creditcard-message="The credit card number is not valid" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#creditCardForm').formValidation();
});
</script>

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.

<style type="text/css">
/**
 * Adjust feedback icon position
 * See http://formvalidation.io/examples/adjusting-feedback-icon-position/
 */
#creditCardForm .selectContainer .form-control-feedback {
    right: -15px;
}
</style>

<form id="creditCardForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Credit card type</label>
        <div class="col-xs-3 selectContainer">
            <select class="form-control" name="cardType">
                <option value="">Select a type</option>
                <option value="Ae">American Express</option>
                <option value="Master">Master</option>
                <option value="Visa">Visa</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Credit card number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="cc" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#creditCardForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            fields: {
                cardType: {
                    validators: {
                        notEmpty: {
                            message: 'The type is required'
                        }
                    }
                },
                cc: {
                    validators: {
                        notEmpty: {
                            message: 'The credit card number is required'
                        },
                        creditCard: {
                            message: 'The credit card number is not valid'
                        }
                    }
                }
            }
        })
        .on('success.validator.fv', function(e, data) {
            // data.field     ---> The field name
            // data.validator ---> The validator name
            // data.fv        ---> The plugin instance

            // Whenever user changes the card type,
            // we need to revalidate the credit card number
            if (data.field === 'cardType') {
                data.fv.revalidateField('cc');
            }

            if (data.field === 'cc' && data.validator === 'creditCard') {
                // data.result.type can be one of
                // AMERICAN_EXPRESS, DINERS_CLUB, DINERS_CLUB_US, DISCOVER, JCB, LASER,
                // MAESTRO, MASTERCARD, SOLO, UNIONPAY, VISA

                var currentType = null;
                switch (data.result.type) {
                    case 'AMERICAN_EXPRESS':
                        currentType = 'Ae';         // Ae is the value of American Express card in the select box
                        break;

                    case 'MASTERCARD':
                    case 'DINERS_CLUB_US':
                        currentType = 'Master';     // Master is the value of Master card in the select box
                        break;

                    case 'VISA':
                        currentType = 'Visa';       // Visa is the value of Visa card in the select box
                        break;

                    default:
                        break;
                }

                // Get the selected type
                var selectedType = data.fv.getFieldElements('cardType').val();
                if (selectedType && currentType !== selectedType) {
                    // The credit card type doesn't match with the selected one
                    // Mark the field as not valid
                    data.fv.updateStatus('cc', data.fv.STATUS_INVALID, 'creditCard');
                }
            }
        });
});
</script>

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
Mastercard fa fa-cc-mastercard
Visa fa fa-cc-visa
Other fa fa-credit-card
PaymentFont and Payment Webfont provide more payment icons
<form id="creditCardForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Credit card number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="cc" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#creditCardForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            fields: {
                cc: {
                    validators: {
                        creditCard: {
                            message: 'The credit card number is not valid'
                        }
                    }
                }
            }
        })
        .on('success.validator.fv', function(e, data) {
            if (data.field === 'cc' && data.validator === 'creditCard') {
                var $icon = data.element.data('fv.icon');
                // data.result.type can be one of
                // AMERICAN_EXPRESS, DINERS_CLUB, DINERS_CLUB_US, DISCOVER, JCB, LASER,
                // MAESTRO, MASTERCARD, SOLO, UNIONPAY, VISA

                switch (data.result.type) {
                    case 'AMERICAN_EXPRESS':
                        $icon.removeClass().addClass('form-control-feedback fa fa-cc-amex');
                        break;

                    case 'DISCOVER':
                        $icon.removeClass().addClass('form-control-feedback fa fa-cc-discover');
                        break;

                    case 'MASTERCARD':
                    case 'DINERS_CLUB_US':
                        $icon.removeClass().addClass('form-control-feedback fa fa-cc-mastercard');
                        break;

                    case 'VISA':
                        $icon.removeClass().addClass('form-control-feedback fa fa-cc-visa');
                        break;

                    default:
                        $icon.removeClass().addClass('form-control-feedback fa fa-credit-card');
                        break;
                }
            }
        })
        .on('err.field.fv', function(e, data) {
            if (data.field === 'cc') {
                var $icon = data.element.data('fv.icon');
                $icon.removeClass().addClass('form-control-feedback fa fa-times');
            }
        });
});
</script>

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

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

The transformer option 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
<p>Test (invalid) credit card numbers that you want it to be valid:</p>
<ul class="doc-list">
    <li>3333222233332222</li>
    <li>30030008444444</li>
</ul>

<form id="acceptTestNumberForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Credit card number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="cc" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // List of test credit card numbers that you want it to be passed
    // although they can be invalid one
    var TEST_CARD_NUMBERS = ['3333222233332222', '30030008444444'];

    // We will transform those test card numbers into a valid one as below
    var VALID_CARD_NUMBER = '4444111144441111';

    $('#acceptTestNumberForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            cc: {
                validators: {
                    creditCard: {
                        message: 'The credit card number is not valid',
                        transformer: function($field, validatorName, validator) {
                            // Get the number provided by user
                            var value = $field.val();

                            // Check if it's one of test card numbers
                            if (value !== '' && $.inArray(value, TEST_CARD_NUMBERS) != -1) {
                                // then turn it to be a valid one defined by VALID_CARD_NUMBER
                                return VALID_CARD_NUMBER;
                            } else {
                                // Otherwise, just return the initial value
                                return value;
                            }
                        }
                    }
                }
            }
        }
    });
});
</script>

For more usage of transformer option, you should take a look at the following example:

Related validators

The following validators might be useful to you: