PAN Card Number Validation Using Javascript and React

In this article, I am going to teach you how to do PAN card number validation using Javascript and React. There are a lot of solutions across the internet on this topic. But here, I will be implementing this in ES6 and a React app.

What is PAN?

PAN stands for Permanent Account Number, which is an identification number assigned to all taxpayers in India.

Structure of the PAN Card Number

The PAN is a 10-letter alphanumeric identifier which represents the card holder. Among the 10 letters, the first 5 will be alphabets, the next 4 will be numeric, and the 10th letter will be an alphabet. If we break it down further in detail:

• First 3 letters will be random alphabets generated from A to Z.
• 4th letter represents the category of the taxpayer. Each category has its own identification letter as below:
  • A — Association of persons (AOP)
  • B — Body of individuals (BOI)
  • C — Company
  • F — Firm
  • G — Government
  • H — HUF (Hindu undivided family)
  • L — Local authority
  • J — Artificial juridical person
  • P — Individual or Person
  • T — Trust (AOP)
• 5th letter is the first letter of the individual’s surname.
• Next 4 letters are a 4-digit random number under 9999.
• Last (10th) letter is an alphabet which is used as a check-sum to verify the validity of the current code.

In the following code, we are going to validate whether the given number is a valid PAN number or not.

PAN Card Number Validation Using Javascript

The best possible way to validate whether the given string is a valid PAN or not is by using regular expressions. The following is the regular expression used to validate PAN:

let regex = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

Using the above regex code, I have created a function called pancardValidation in ES6:

export const pancardValidation = (text) => {
  let regex = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

  if (regex.test(text)) {
     return true;
  }

  return false;
}

Happy Coding!