v0.5.3 is released on 2014.11.05!
Options
Option | HTML attribute | Type | Description |
---|---|---|---|
creditCardField |
data-bv-cvv-ccfield |
String | The credit card number field. It is null by default |
message |
data-bv-cvv-message |
String | The error message |
When setting options via HTML attributes, remember to enable the validator by setting data-bv-cvv="true".
If the creditCardField
is set, the validator will check if the CVV number is suitable with the credit card number of not.
In the details, the American Express card only accepts 4 digits CVV number, while other cards only accept 3 digits CVV number.
Example
The following form also validates the CVV number based on the credit card number.
You can use www.getcreditcardnumbers.com to generate fake credit card numbers.
<form id="cvvForm" 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="ccNumber" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">CVV</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="cvvNumber" />
</div>
</div>
</form>
$(document).ready(function() {
$('#cvvForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ccNumber: {
validators: {
creditCard: {
message: 'The credit card number is not valid'
}
}
},
cvvNumber: {
validators: {
cvv: {
creditCardField: 'ccNumber',
message: 'The CVV number is not valid'
}
}
}
}
});
});
Related validators
The following validators might be useful to you: