How to Validate a Credit Card Number with Javascript

How to Validate a Credit Card Number with Javascript

Validate a Credit Card Number with Javascript - Examples of user friendly forms.

A validating credit card is an important point while receiving payment through an HTML form. In this page, we have discussed how to validate a credit card number (in a different format) using JavaScript. There are various companies in financial market offer credit cards. But there is no common format in the credit card numbering system, it varies company to company. We are not sure that all the formats which we have discussed here are correct because time to time a company can change their numbering format. You can easily change a format with simply modify the regular expression which we have used for various cards. Here are some format of some well-known credit cards.

  • American Express :- Starting with 34 or 37, length 15 digits.
  • Visa :- Starting with 4, length 13 or 16 digits.
  • MasterCard :- Starting with 51 through 55, length 16 digits.
  • Discover :- Starting with 6011, length 16 digits or starting with 5, length 15 digits.
  • Diners Club :- Starting with 300 through 305, 36, or 38, length 14 digits.
  • JCB :- Starting with 2131 or 1800, length 15 digits or starting with 35, length 16 digits.

Following code blocks contain actual codes for the said credit cards validations. We have kept the CSS code part common for all the validations.

JavaScript Code

function cardnumber(inputtxt)
{
  var cardno = /^(?:3[47][0-9]{13})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Amercican Express credit card number!");
        return false;
        }
}

CSS Code

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}    

Validate a American Express credit card

Following example validate a American Express credit card starting with 34 or 37, length 15 digits.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 34 or 37, length 15 digits (American Express) 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="credit-card-americal-express-validation.js"></script>
</body>
</html>

Flowchart:

Flowchart : JavaScript - American Express Card

Validate a Visa credit card

Following example validate a Visa card starting with 4, length 13 or 16 digits.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 4 length 13 or 16 digits (Visa) 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="credit-card-visa-validation.js"></script>
</body>
</html>

JavaScript Code

function cardnumber(inputtxt)
{
  var cardno = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Visa credit card number!");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript - Visa Card

Validate a MasterCard

Following example validate a MasterCard starting with 51 through 55, length 16 digits.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 51 through 55, length 16 digits (Mastercard) 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="credit-card-master-validation.js"></script>
</body>
</html>

JavaScript Code

function cardnumber(inputtxt)
{
  var cardno = /^(?:5[1-5][0-9]{14})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Mastercard number!");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript - Master Card

Validate a Discover Card

Following example validate a Discover Card starting with 6011, length 16 digits or starting with 5, length 15 digits.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 6011, length 16 digits or starting with 5, length 15 digits (Discover) 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="credit-card-master-validation.js"></script>
</body>
</html>

JavaScript Code

function cardnumber(inputtxt)
{
  var cardno = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Discover card number!");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript - Discover Card

Validate a Diners Club Card

Following example validate a Diners Club card starting with 300 through 305, 36, or 38, length 14 digits.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[starting with 300 through 305, 36, or 38, length 14 digits (Diners Club) 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="credit-card-diners-validation.js"></script>
</body>
</html>

JavaScript Code

function cardnumber(inputtxt)
{
  var cardno = /^(?:3(?:0[0-5]|[68][0-9])[0-9]{11})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Dinners Club card number!");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript - Dinners Card

Validate a JCB Card

Following example validate a JCB card starting with 2131 or 1800, length 15 digits or starting with 35, length 16 digits.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 2131 or 1800, length 15 digits or starting with 35, length 16 digits (JCB card) 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="credit-card-jcb-validation.js"></script>
</body>
</html>

JavaScript Code

function cardnumber(inputtxt)
{
  var cardno = /^(?:(?:2131|1800|35\d{3})\d{11})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid JCB card number!");
        return false;
        }
}

If you want to create a credit card checker and test your own code. I’m still learning more about code every day. I would love to hear from you, if you have any tips or suggestions.

Thank you for reading !

Javascript #HTML #CSS Webdev

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Animated Counter using JavaScript with HTML & CSS

In this JavaScript tutorial, I will show you how to create an animated counter that counts up to any number using JavaScript with HTML & CSS.

Build a Profile Card with HTML, CSS, and JavaScript

Learn how to build a Profile Card with HTML, CSS, and JavaScript

How to Create an Instant Search Bar using HTML, CSS and JavaScript

Learn how to create an Instant Search Bar using HTML, CSS and JavaScript. The solution is responsive, mobile friendly and is highly customizable from a developer perspective, meaning you're easily able to extend the functionality of the search bar by changing a couple of lines of JavaScript or CSS.

2.5D Parallax Effects on Mousemove using Html CSS & Vanilla Javascript

Today we are going to talk about 2.5D Parallax Effect on Mousemove using Html CSS & Vanilla Javascript. What is it? How to create it? When can it be used and what are the advantages? What is VanillaJS? 2.5D Parallax Effects on Mousemove using Html CSS & Vanilla Javascript

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript