/Validating-Credit-Card-Numbers.markdown

## index.html
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="validation.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="cardtype.js"></script>

</head>
<body>
	<h4>
		<input id="testVisa" type="button" value="Visa" class="field">
		<input id="testVisaShort" type="button" value="Short Visa" class="field">
		<input id="testMasterCard" type="button" value="MasterCard" class="field">
		<input id="testAmex" type="button" value="Amex" class="field">
		<input id="testDiscover" type="button" value="Discover" class="field">
		<input id="testJCB" type="button" value="JCB" class="field">
		<input id="testDiners" type="button" value="Diners" class="field">
	</h4>
	<ol>
		<li>Enter a value in the Credit Card Number field or click one of the buttons above to populate a test number for you.</li>
		<p>Dashes are ignored, so you may use them if you like.</p>
		<li>Click the validate button.</li>
		<li>The validation message will let you know if the number is in the correct format.</li>
	</ol>
	<h4>Credit Card input validation</h4>
    <input id="ccNum" type="text" class="field required">
	<input id="ccValidator" type="button" value="Validate" class="field">
	<h4>Credit card number validation message:</h4>
	<p id="ccValidation"></p>
	<input id="validCardNumber" value="invalid" type="hidden">
	<input id="cardType" value="none" type="hidden">

</body>
</html>

## script.js
$(document).ready(function () {

    // buttons to populate test credit card numbers into
    // input box
    $('#testVisa').click(function () {
          $('#ccNum').val('4111111111111111');
        });
    $('#testVisaShort').click(function () {
          $('#ccNum').val('4222222222222');
        });
    $('#testMasterCard').click(function () {
          $('#ccNum').val('5555555555554444');
        });
    $('#testAmex').click(function () {
          $('#ccNum').val('378282246310005');
        });
    $('#testDiscover').click(function () {
          $('#ccNum').val('6011111111111117');
        });
    $('#testJCB').click(function () {
          $('#ccNum').val('3530111333300000');
        });
     $('#testDiners').click(function () {
          $('#ccNum').val('30569309025904');
        });


    $('#ccValidator').click(function () {
        initCardNumberValidity();
      var ccNum = $('#ccNum').val();
      // Remove any dashes in number
      ccNum = ccNum.split("-").join("");
      ccNum = cardtype(ccNum);
        displayValidationMessage(ccNum);

    });

  function displayValidationMessage(s) {
    $('#ccValidation').text(s);
    var valid = $('#validCardNumber').val();
  }

  function initCardNumberValidity() {
    $('#validCardNumber').val('invalid');
    $('#cardType').val('none');
  }

  function cardNumberIsValid(cardType) {
    $('#validCardNumber').val('valid');
    $('#cardType').val(cardType);
  }

function cardtype(number) {
    var re = {
        visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
        mastercard: /^5[1-5][0-9]{14}$/,
        amex: /^3[47][0-9]{13}$/,
        diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
        discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/,
        jcb: /^(?:2131|1800|35\d{3})\d{11}$/
    };
    if (re.visa.test(number)) {
        cardNumberIsValid('visa');
        return 'Valid Credit Card Number format: Visa';
    } else if (re.mastercard.test(number)) {
        cardNumberIsValid('mastercard');
        return 'Valid Credit Card Number format: Mastercard';
    } else if (re.amex.test(number)) {
        cardNumberIsValid('amex');
        return 'Valid Credit Card Number format: Amex';
    } else if (re.discover.test(number)) {
        cardNumberIsValid('discover');
        return 'Valid Credit Card Number format: Discover';
    } else if (re.diners.test(number)) {
        return 'We accept Visa, Mastercard, American Express and Discover Card. Please try another card. (You entered a Diners Club Card.)';
    } else if (re.jcb.test(number)) {
        return 'We accept Visa, Mastercard, American Express and Discover Card. Please try another card. (You entered a JCB Card.)';
    }
    return 'The card number you entered is invalid. Please enter a valid Visa, Mastercard, American Express, or Discover card number.';
}

});

## style.css
.field {
  margin-left: 25px;
}

.required {
  background-color: #d8d8a8;
}

## Validating-Credit-Card-Numbers.markdown

      
    Raw
  

              Validating-Credit-Card-Numbers.markdown
            
          
    Validating Credit Card Numbers

Use this to validate credit card numbers. Dashes are ignored, so users may input them if they like.
Tests for Visa, Mastercard, Amex, Discover, JCB, and Diners Club.
Uses two hidden fields to store the type of card entered and whether or not the number entered is a valid credit card number.
Regex source: http://stackoverflow.com/questions/72768/how-do-you-detect-credit-card-type-based-on-number
A Pen by Jon Crowell on CodePen.
License.
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="validation.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="cardtype.js"></script>

	</head>
	<body>
	<h4>
	<input id="testVisa" type="button" value="Visa" class="field">
	<input id="testVisaShort" type="button" value="Short Visa" class="field">
	<input id="testMasterCard" type="button" value="MasterCard" class="field">
	<input id="testAmex" type="button" value="Amex" class="field">
	<input id="testDiscover" type="button" value="Discover" class="field">
	<input id="testJCB" type="button" value="JCB" class="field">
	<input id="testDiners" type="button" value="Diners" class="field">
	</h4>
	<ol>
	<li>Enter a value in the Credit Card Number field or click one of the buttons above to populate a test number for you.</li>
	<p>Dashes are ignored, so you may use them if you like.</p>
	<li>Click the validate button.</li>
	<li>The validation message will let you know if the number is in the correct format.</li>
	</ol>
	<h4>Credit Card input validation</h4>
	<input id="ccNum" type="text" class="field required">
	<input id="ccValidator" type="button" value="Validate" class="field">
	<h4>Credit card number validation message:</h4>
	<p id="ccValidation"></p>
	<input id="validCardNumber" value="invalid" type="hidden">
	<input id="cardType" value="none" type="hidden">

	</body>
	</html>
	$(document).ready(function () {

	// buttons to populate test credit card numbers into
	// input box
	$('#testVisa').click(function () {
	$('#ccNum').val('4111111111111111');
	});
	$('#testVisaShort').click(function () {
	$('#ccNum').val('4222222222222');
	});
	$('#testMasterCard').click(function () {
	$('#ccNum').val('5555555555554444');
	});
	$('#testAmex').click(function () {
	$('#ccNum').val('378282246310005');
	});
	$('#testDiscover').click(function () {
	$('#ccNum').val('6011111111111117');
	});
	$('#testJCB').click(function () {
	$('#ccNum').val('3530111333300000');
	});
	$('#testDiners').click(function () {
	$('#ccNum').val('30569309025904');
	});


	$('#ccValidator').click(function () {
	initCardNumberValidity();
	var ccNum = $('#ccNum').val();
	// Remove any dashes in number
	ccNum = ccNum.split("-").join("");
	ccNum = cardtype(ccNum);
	displayValidationMessage(ccNum);

	});

	function displayValidationMessage(s) {
	$('#ccValidation').text(s);
	var valid = $('#validCardNumber').val();
	}

	function initCardNumberValidity() {
	$('#validCardNumber').val('invalid');
	$('#cardType').val('none');
	}

	function cardNumberIsValid(cardType) {
	$('#validCardNumber').val('valid');
	$('#cardType').val(cardType);
	}

	function cardtype(number) {
	var re = {
	visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
	mastercard: /^5[1-5][0-9]{14}$/,
	amex: /^3[47][0-9]{13}$/,
	diners: /^3(?:0[0-5]\|[68][0-9])[0-9]{11}$/,
	discover: /^6(?:011\|5[0-9]{2})[0-9]{12}$/,
	jcb: /^(?:2131\|1800\|35\d{3})\d{11}$/
	};
	if (re.visa.test(number)) {
	cardNumberIsValid('visa');
	return 'Valid Credit Card Number format: Visa';
	} else if (re.mastercard.test(number)) {
	cardNumberIsValid('mastercard');
	return 'Valid Credit Card Number format: Mastercard';
	} else if (re.amex.test(number)) {
	cardNumberIsValid('amex');
	return 'Valid Credit Card Number format: Amex';
	} else if (re.discover.test(number)) {
	cardNumberIsValid('discover');
	return 'Valid Credit Card Number format: Discover';
	} else if (re.diners.test(number)) {
	return 'We accept Visa, Mastercard, American Express and Discover Card. Please try another card. (You entered a Diners Club Card.)';
	} else if (re.jcb.test(number)) {
	return 'We accept Visa, Mastercard, American Express and Discover Card. Please try another card. (You entered a JCB Card.)';
	}
	return 'The card number you entered is invalid. Please enter a valid Visa, Mastercard, American Express, or Discover card number.';
	}

	});
	.field {
	margin-left: 25px;
	}

	.required {
	background-color: #d8d8a8;
	}