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: