programer.tips, another cool thing from @nghuuphuoc!

creditCard validator

Validate a credit card number

Validators

Improve it on Github

Options

Option HTML attribute Type Description
message data-bv-creditcard-message String The error message
When setting options via HTML attributes, remember to enable the validator by setting data-bv-creditcard="true".
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
Diners Club 30130708434187
Diners Club (US) 5517479515603901
Discover 6011734674929094
JCB 3566002020360505
Laser 6304 9000 1774 0292 441
Maestro 6762835098779303
Mastercard 5303765013600904
Solo 6334580500000000
Unionpay
Visa 4929248980295542
13 digits Visa credit cards are no longer used and it will be treated as an invalid card number.

Example

You can use www.getcreditcardnumbers.com to generate fake credit card numbers.
<form id="creditCardForm" class="form-horizontal">
    <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" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#creditCardForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            cc: {
                validators: {
                    creditCard: {
                        message: 'The credit card number is not valid'
                    }
                }
            }
        }
    });
});
<form id="creditCardForm" class="form-horizontal"
    data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
    data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
    data-bv-feedbackicons-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-bv-creditcard="true"
                data-bv-creditcard-message="The credit card number is not valid" />
        </div>
    </div>
</form>

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

Related validators

The following validators might be useful to you: