Detect credit Card

cc-identifier.js

function autodetectCC( num ) {

    if ( /^5[1-5]/.test( num ) ) {
        selectCC( "mcrd" );   
    }
    
    else if ( /^4/.test( num ) ) {
        selectCC( "visa" );    
    }
    
    else if ( /^3[47]/.test( num ) ) {
        selectCC( "amex" );
    }
    
    else if( /^6[0245]/.test( num ) ) {
        selectCC( "dscv" );
    }
    
    else {
        selectCC( "none" );
    }
    
}

function selectCC( id ) {
    if( id == "none" ) {
        $(".cc-logo").removeClass("deselected");
    }
    else {
        $(".cc-logo").addClass("deselected");
        $("#"+id).removeClass("deselected");
    }
}

$(document).ready( function () {
    $("input#ccnumber, input#ccnum").keyup( function() {
        autodetectCC( $(this).val() ) 
    });
});

cc.css

.cc-identifier {
    margin: 0;
    padding: 10px 0 0;
    list-style-type: none
}

.cc-logo {
    width: 39px;
    height: 23px;
    border: none;
    text-indent: -99999px;
    margin-right: 5px;
    background-image: url(https://ac.mediatemple.net/_img/cc-sprite.png);
    background-position: 0 0
}

.cc-logo.deselected {
    opacity: .4
}

.cc-logo#amex.deselected {
    background-position: 0 -100%
}

.cc-logo#visa {
    background-position: -42px 0
}

.cc-logo#visa.deselected {
    background-position: -42px -100%
}

.cc-logo#mc,.cc-logo#mcrd {
    background-position: -83px 0
}

.cc-logo#mc.deselected,.cc-logo#mcrd.deselected {
    background-position: -83px -100%
}

.cc-logo#disc,.cc-logo#dscv {
    background-position: -124px 0
}

.cc-logo#disc.deselected,.cc-logo#dscv.deselected {
    background-position: -124px -100%
}

cc.html

<ul class="cc-identifier  island  island--small island--vertical">
    <li class="cc-logo u-pullLeft deselected" id="amex">AMEX</li>
    <li class="cc-logo u-pullLeft deselected" id="visa">VISA</li>
    <li class="cc-logo u-pullLeft" id="mcrd">MCRD</li>
    <li class="cc-logo u-pullLeft deselected" id="dscv">DSCV</li>
</ul>