Skip to content

Instantly share code, notes, and snippets.

@joshmun23

joshmun23/Credit Card Validation.markdown

Created September 4, 2015 15:49
Show Gist options
  • Save joshmun23/3d587ba2af65f04226dd to your computer and use it in GitHub Desktop.
Save joshmun23/3d587ba2af65f04226dd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joshmun23 created this gist Sep 4, 2015.
    9 changes: 9 additions & 0 deletions Credit Card Validation.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Credit Card Validation
    ----------------------
    A simple credit card validation/identification script for identifying visa, amex, discover, and mastercard as well as Luhn validation.

    Forked from [Jacob White](http://codepen.io/jbuc/)'s Pen [Credit Card Validation](http://codepen.io/jbuc/pen/IbvyJ/).

    A [Pen](http://codepen.io/iamsok/pen/gabejm) by [David Sok](http://codepen.io/iamsok) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/iamsok/pen/gabejm/license).
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <input type="text" class="cc" placeholder="XXXX XXXX XXXX XXXX" />
    48 changes: 48 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    function checkLuhn(input) {
    var sum = 0;
    var numdigits = input.length;
    var parity = numdigits % 2;
    for(var i=0; i < numdigits; i++) {
    var digit = parseInt(input.charAt(i))
    if(i % 2 == parity) digit *= 2;
    if(digit > 9) digit -= 9;
    sum += digit;
    }
    return (sum % 10) == 0;
    };
    function detectCard(input) {
    var typeTest = 'u',
    ltest1 = 16,
    ltest2 = 16;
    if(/^4/.test(input)){
    typeTest = 'v';
    ltest1 = 13;
    } else if (/^5[1-5]/.test(input)){
    typeTest = 'm';
    } else if (/^3[4-7]/.test(input)){
    typeTest = 'a';
    ltest1 = 15;
    ltest2 = 15;
    } else if(/^6(011|4[4-9]|5)/.test(input)){
    typeTest = 'd';
    }
    return [typeTest,ltest1,ltest2];
    }


    $('input.cc').keyup(function(){
    var val = this.value,
    val = val.replace(/[^0-9]/g, ''),
    detected = detectCard(val),
    errorClass = '',
    luhnCheck = checkLuhn(val),
    valueCheck = (val.length == detected[1] || val.length == detected[2]);
    console.log(valueCheck);
    if(luhnCheck && valueCheck) {
    errorClass = 'verified';
    } else if(valueCheck || val.length > detected[2]) {
    errorClass = 'error';
    }

    $(this).attr('class', 'cc ' + detected[0] + ' ' + errorClass);
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    40 changes: 40 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    body, html {
    height:100%;
    }
    .cc{
    background: url('http://jbuc.com/look/here/cards.png') 20px 4px no-repeat;
    font-size:2em;
    padding:.3em;
    padding-left:3em;
    margin:-1em auto 0;
    position:relative;
    top:50%;
    display:block;
    border-radius:.2em;border:1px solid #ddd;
    box-shadow:.05em .05em .1em rgba(50,50,50,.08) inset;
    outline:none;
    transition:border 500ms;
    transition:box-shadow 500ms;
    transition:color 500ms;
    transition:background-color 500ms;
    width:12.15em;
    position:relative;
    }
    .cc:focus {
    box-shadow:.05em .05em .25em rgba(50,50,50,.25) inset;
    border:1px solid #ccc;
    }
    .cc.error {
    border-color: rgb(255, 100, 100);
    box-shadow: .05em .05em .25em rgba(170, 117, 117, .5) inset;
    background-color: rgba(255, 100, 100, .08);
    color: rgb(90, 0, 0);
    }
    .cc.verified {
    border-color:rgb(152, 199, 152);
    }

    .cc.a {background-position:4px -96px;}
    .cc.d {background-position:4px -196px;}
    .cc.m {background-position:4px -296px;}
    .cc.v {background-position:4px -396px;}