Card Validator Documentation

Install and configure your card validator plugin.


Installation

If you plan to use your own card form with your own styling use the minmal install, if you would like to use our provided form with animations choose the full install.

Minimal Install

<script src="js/validator.js"></script>

Full Install

<link rel="stylesheet" href="css/cardvalidator.css">
<script src="js/animationmodules.js"></script>
<script src="js/validator.js"></script>

Usage

HTML

<div class="vjs-form vjs-dropshadow">
    <div class="vjs-name">
        <label>Cardholder Name</label>
        <input type="text" id="vjs-card-name" placeholder="Johhny Appleseed">
    </div>
    <div class="vjs-number">
        <label>Card Number</label>
        <div class="vjs-card-provider">
            <ul class="vjs-providers">
                <li id="default"></li>
                <li id="discover"></li>
                <li id="amex"></li>
                <li id="jcb"></li>
                <li id="visa"></li>
                <li id="maestro"></li>
                <li id="dinersclub"></li>
                <li id="mastercard"></li>
            </ul>
        </div>
        <input maxlength="19" type="text" id="vjs-card-number" placeholder="4242 4242 4242 4242">
        <div class="vjs-clear"></div>
    </div>
    <div class="vjs-info">
        <div class="vjs-exp">
            <label>Expiration</label>
            <div class="vjs-month">
                <select id="vjs-card-exp-month">
                    <option value="MM" selected="" disabled="">MM</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
                <div class="vjs-clear"></div>
            </div>
            <div class="vjs-year">
                <select id="vjs-card-exp-year">
                    <option value="YYYY" selected="" disabled="">YYYY</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                    <option value="2026">2026</option>
                </select>
                <div class="vjs-clear"></div>
            </div>
        </div>
        <div class="vjs-cvc">
            <label>CVC</label>
            <input maxlength="4" type="text" id="vjs-card-cvc" placeholder="123">
        </div>
        <div class="vjs-clear"></div>
    </div>
</div>

Javacript

<script type="text/javascript">validator.init({});</script>

Options

Example Options Object

This example object contains the default values for each available option.

var options = {
        validation: {
            validate: true,
            formatting: true,
            tooltips: false,
            onBlur: true
        },
        selectors: {
            cardName: 'vjs-card-name',
            cardNumber: 'vjs-card-number',
            cardCVC: 'vjs-card-cvc',
            cardExpMonth: 'vjs-card-exp-month',
            cardExpYear: 'vjs-card-exp-year'
        },
        animation: {
            enabled: false,
            speed: 1000,
            easing: true,
            equation: 'easeInOutExpo',
        },
        callbacks: {
            success: function () {},
            fail: function () {}
        }
};

validation

Name Type Default Description
validate boolean true Validate the fields supplied by selectors.
formattting boolean true Apply formatting spaces to card number input? Ex. 4242424242424242 => 4242 4242 4242 4242
tooltips boolean false Toggle tooltips on fields with invalid values.
onBlur boolean true Validate input field as soon as user exits field

selectors

Name Type Default Description
cardName string vjs-card-name Class name for card name input field.
cardNumber string vjs-card-number Class name for card number input field.
cardCVC string vjs-card-cvc Class name for card cvc/cvv input field.
cardExpMonth string vjs-card-exp-month Class name for card expiration month input field.
cardExpYear string vjs-card-exp-year Class name for card expiration year input field.

animation

Name Type Default Description
enabled boolean false Toggle card animation module.
speed integer 1000 Animation speed of card rotation in milliseconds.
easing boolean true Toggle easing of card animation.
equation string easeInOutExpo Type of easing. Options: easeInOutCirc, easeInQuad, easeInOutSine, easeInOutExpo, easeOutCirc, easeOutCubic

callbacks

Name Type Default Description
success function function(){} Function called on successful form validation.
failure function function(){} Function called on form validation failure.