BootstrapValidator

Validators / cvv

Validate a CVV number.

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

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.

Sample credit card numbers for testing

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

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

    <div class="form-group">
        <label class="col-lg-3 control-label">CVV</label>
        <div class="col-lg-2">
            <input type="text" class="form-control" name="cvvNumber" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#paymentForm').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'
                    }
                }
            }
        }
    });
});

The following validators might be useful to you: