patterns - credit card

credit card masking

by Sergey Linnick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.3.2/jquery.payment.js"></script>
<link rel="stylesheet" href="https://www.llbean.com/css/forms.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<div class="container formElements">
    <div class="block">
         <h3>Number Only</h3>

        <form id="creditCard">
            <label for="cc-num">Card number</label>
            <input type="tel" class="cc-num" name="cc-num" placeholder="xxxx xxxx xxxx xxxx"> <span class="check"></span>
            <div class="error1">Please enter your credit card information</div>
            <div class="error2">Please check your credit card information and try again</div>
            <div class="smallFields">
                <div>
                    <label for="cc-month">Expiration</label>
                    <select class="cc-month smallInput" name="cc-month">
                        <option value="" disabled selected>Month</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>
                    <select class="cc-year smallInput">
                        <option value="" disabled selected>Year</option>
                        <option value="01">2015</option>
                        <option value="02">2016</option>
                        <option...

CSS

* {
    font-family: Arial;
    font-size: 14px !important;
}
label {
    display: block;
}

.formElements input, .formElements textarea, .formElements select, .formElements .uneditable-input {
    padding: 5px;
}
input.cc-num {
    background-image: url(https://i.imgur.com/uzwV72k.png);
    background-position: 2px -107px;
    background-size: 105px;
    background-repeat: no-repeat;
    padding: 6px 20px 6px 50px;
}
input.cc-num.visa {
    background-position: 2px -144px;
}
input.cc-num.mastercard {
    background-position: 2px -218px;
}

input.cc-num.llbvisa {
    background-position: 2px -328px;
}
span.check {
    background-image: url(https://i.imgur.com/uzwV72k.png);
    background-position: 2px -48px;
    background-size: 100px;
    background-repeat: no-repeat;
    padding: 7px;
    margin-left: -25px;
    opacity: 0;
}
input.cc-num.valid {
    border: 1px solid #368700;
    outline: 0 none;
}
span.check.valid {
    background-position: 2px -69px;
    opacity: 1;
}
span.check.loading {
    background: url(https://www.dropbox.com/s/mc0f4yv8p9gofmb/43px_grey_on_white.gif?raw=1) no-repeat;
    background-position: 0 50%;
    opacity: 1;
    background-size: contain;
}
.info {
    margin-top: 60px;
    color: #999;
    font-size: 13px;
}
dt {
    float: left;
}
dd {
    margin-left: 110px;
}
.smallFields {
    margin-top: 12px;
}
.smallFields .cc-month {
    width: 75px;
}
.smallFields .cc-cvc {
    width: 50px;
}
.smallFields > div {
    display: inline-block;
    margin-right: 32px;
}
.smallFields .cc-exp {
    width: 50px;
}
hr {
    margin: 50px 0;
}
.block {
    display:inline-block;
    width: 400px;
}
.error1, .error2 {
    background: url(https://www.dropbox.com/s/yu5o29rmivp6bgl/error_red.png?raw=1) no-repeat;
    padding: 2px 0 2px 25px;
    background-size: contain;
    display: none;
    color: red;
}
input.errorField {
    border: 1px solid red !important;
}

input.cc-num {
    font-size: 16px !Important;
}

JavaScript

$('input.cc-num').payment('formatCardNumber');
$('input.cc-cvc').payment('formatCardCVC');
$('input.cc-exp').payment('formatCardExpiry');

var llbvisa = [ {
    type: 'llbvisa',
      pattern: /^4868/,
      format: /(\d{1,4})/g,
      length: [16],
      cvcLength: [3],
      luhn: true
}]

$.extend(true,$.payment.cards, llbvisa);

$('input.cc-num').keyup(function (e) {
    var $this = $(this);
    var $val = $this.val();
    var str = $val.replace(/\s+/g, '');
    var char = str.charAt(15);

    if (str.length === 16 && $this.hasClass('identified')) {
        $this.parent().find('.check').addClass('loading');
        setTimeout(function () {
            if (char === "9") {
                $this.removeClass('valid');
                $this.parent().find('.check').removeClass('loading');
                $this.addClass('errorField');
                $this.parent().find('.error2').show();
            } else {
                $this.addClass('valid');
                $this.parent().find('.check').toggleClass('valid loading');
                $('.error1, .error2').hide();
                $this.removeClass('errorField');

            }
        }, 3000);

    } else {
        $this.removeClass('valid error');
        $this.parent().find('.check').removeClass('valid loading');
    }

});

$("input.cc-num").focusout(function(){
   	var $this = $(this);
    var $val = $this.val();
    var str = $val.replace(/\s+/g, '');
    
    if(str.length !== 16 || $this.hasClass('unknown')){
       $this.parent().find('.error1').show();
        $this.addClass('errorField');
       }
});