Options
| Option | HTML attribute | Type | Description |
|---|---|---|---|
creditCardField | data-fv-cvv-ccfield | String | The credit card number field. It is null by default |
message | data-fv-cvv-message | String | The error message |
When setting options via HTML attributes, remember to enable the validator by setting data-fv-cvv="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
If the creditCardField option 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-xs-3 control-label">Credit card number</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="ccNumber" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">CVV</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="cvvNumber" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#cvvForm').formValidation({
framework: 'bootstrap',
icon: {
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'
}
}
}
}
});
});
</script><form id="cvvForm" 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-xs-3 control-label">Credit card number</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="ccNumber"
data-fv-creditcard="true"
data-fv-creditcard-message="The credit card number is not valid" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">CVV</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="cvvNumber"
data-fv-cvv="true"
data-fv-cvv-ccfield="ccNumber"
data-fv-cvv-message="The CVV number is not valid" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#cvvForm').formValidation();
});
</script>Related validators
The following validators might be useful to you: