Introduction

In this article I explain card number validation in PHP using JavaScript and discuss how to validate a credit card and master cart number with a JavaScript function. You can change easily any card number format  using a regular expression. I am using HTML and  CSS for the card design.

Example

This CSS file is to be saved as "form.css".

li {list-style-type: none;

font-size: 16pt;

}

.sent {

margin: auto;

padding-top: 10px;

padding-bottom: 10px;

width: 400px;

background:#F9BB60;

border: 2px soild silver;

}

.sent h2 {

margin-left: 38px;

}

input {

font-size: 20pt;

}

input:focus, textarea:focus{

background-color:#99FFCC;

}

.rq {

color:#FF3366;

font-size: 10pt;

}

 

This is a JavaScript file for validating a credit card number; save the file as "credit-validation.js".

function credit(inputtxt) 

//using regular expression

  var number = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/

  if(inputtxt.value.match(number)) 

        { 

      return true

        } 

      else 

        { 

        alert("Not a valid Visa credit card number!"); 

        return false

        } 

}

 

This is a HTML file for using credit card design.

 

<html>

<head>

<meta charset="utf-8">

<title>Credit Card</title>

<link rel='stylesheet' href='form.css' type='text/css' />     

</head><br><body onload='document.form1.text1.focus()'>

<div class="sent">

<h2>Starting with 4 length 13 or 16 digits and Submit</h2>

<form name="form1" action="#">

<ul>

<li><input type='text' name='text1'/></li>

<li>&nbsp;</li>

<li class="submit"><input type="submit" name="submit" value="Submit" onclick="credit(document.form1.text1)"/></li>

<li>&nbsp;</li>

</ul>

</form>

</div>

<script src="credit-validation.js"></script>

</body>

</html>

Output
Credit card validation.jpg

If the wrong number is entered then show an error.
Credit card validation2.jpg

When the correct credit card number is entered it looks like:
Credit card validation3.jpg

Example

Here, this code is used for validating a master card number; this file is to be saved as "master-card.js".

function cardnumber(inputtxt) 

  var cardno = /^(?:5[1-5][0-9]{14})$/

  if(inputtxt.value.match(cardno)) 

        { 

      return true

        } 

      else 

        { 

        alert("invalide Mastercard number!"); 

        return false

        } 

}

   

This is a HTML file for master card design.

<html>

<head> 

<meta charset="utf-8"> 

<title>Master</title> 

<link rel='stylesheet' href='form.css' type='text/css' />       

</head>

<br><body onload='document.form1.text1.focus()'> 

<div class="sent"> 

<h2>Input master Card No. Starting with 51 through 55, length 16 digits and Submit</h2> 

<form name="form1" action="#"> 

<ul> 

<li><input type='text' name='text1'/></li> 

<li>&nbsp;</li> 

<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li> 

<li>&nbsp;</li> 

</ul> 

</form> 

</div> 

<script src="master-validation.js"></script> 

</body> 

</html>

Output
Master validation in php.jpg

If you have entered the wrong number then show this error. Such as:
Master validation in php1.jpg

When you have entered the correct master card number it looks like:
Master validation in php2.jpg

Next Recommended Readings