Credit Card Validation

Credit Card Validation.markdown

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's Pen Credit Card Validation.

A Pen by David Sok on CodePen.

License.

index.html

<input type="text" class="cc" placeholder="XXXX XXXX XXXX XXXX" />

script.js

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);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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;}