Sandip124 · January 17, 2020 08:17
diff --git a/index.html b/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>
diff --git a/script.js b/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.';
 }

 });
diff --git a/style.css b/style.css
 .field { 
  margin-left: 25px; 
 }

 .required {
  background-color: #d8d8a8;
 }
diff --git a/Validating-Credit-Card-Numbers.markdown b/Validating-Credit-Card-Numbers.markdown
	<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;
	}