How to validate Passport Number is ReactJS?

Passport number is very sensitive data, and it always requires to validate. For example, you are taking the user’s data for their identification, and you can use the passport number to validate the user’s identity.

Sometimes, the user may enter the wrong passport number. However, you must need to use the database to check whether the passport number matches the user’s real passport number. Still, when a user enters the passport number, you should ensure that the user has entered the correct format.

This tutorial will teach us various approaches to validating passport numbers in ReactJS.

Use the Validator NPM Package

The validator library contains various validation methods, and the isPassportNumber() method is one of them to validate the passport number.

Users can use the below command in the project directory to install the validator NPM package.

npm i validator 

Syntax

Users can follow the syntax below to use the validator NPM package to validate the passport number.

if (validator.isPassportNumber(passport, country_code)) {
   
   // passport number is valid
} else {
   
   // passport number is invalid
} 

In the above syntax, we have used the isPassportNumber() method of the validator NPM package to validate the passport number.

Parameters

• Passport − It is a passport number to validate.

• Country_code − It is a country code like ‘IN’, ‘US’ etc., to validate passport numbers according to country as every country has different syntax.

Example

In the example below, we have imported the validator library. After that, we used the HTML input to take the passport number as input. We have used the ‘onchange’ event with the input. So, whenever the input value changes, it will invoke the handlePassportChange() function.

The handlePassportChange() function uses the isPassportNumber() method to validate the input value. Also, it prints the message according to passport number is valid or not.

import React, { useState } from "react";
import validator from "validator";
function App() {
   let [passport, setPassport] = useState("");
   let [message, setMessage] = useState("");
   function handlePassportChange(event) {
      let current = event.target.value;
      setPassport(current);
      if (validator.isPassportNumber(current, "IN")) {
         setMessage("is Valid Passport Number");
      } else {
         setMessage("is Invalid Passport Number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> validator NPM package </i> to validate passport number in ReactJS{" "}
         </h3>
         <input type = "text" value = {passport} onChange = {handlePassportChange} />
         <p>
            {" "}
            {passport} {message}
         </p>
      </div>
   );
}
export default App;

Output

Use the regular expression to validate the Passport number in ReactJS

We will use the regular expression to validate the passport number in this approach.

Syntax

Users can follow the syntax below to use the regular expression to validate the passport number in ReactJS.

const regex = /^[A-PR-WY][1-9]\d\s?\d{4}[1-9]$/;
let isValid = regex.test(passport);

In the above syntax, we have used the test() method to validate the passport number using the regular expression.

Explanation of Regular Expression

Here, we have explained the regular expression used in the above syntax.

• ^[A-PR-WY] − In the start, the passport number should contain any alphabetic character in the capital case except Q, X, and Z.

• [1-9] − After the alphabetic character, it should contain any digit between 1 to 9.

• \d − As a third character, it can contain any digit between 0 to 9.

• \s? − Space is optional for the fourth character.

• \d{4} − After that space, it should contain four digits between 0 and 9.

• [1-9]$ − At the end, the passport number shoud contain any digit between 1 and 9.

Example

In the example below, we used HTML input to take input and created the function to validate the passport number using the regular expression. We have stored the above regular expression in the regex variable. We have taken the regex as a reference of the test() method and passed the passport number as a parameter. The test() method returns true, based on whether the passport number is valid or invalid.

import React, { useState, useRef } from "react";
function App() {
   let [passport, setPassport] = useState("");
   let [message, setMessage] = useState("");
   const windowSize = useRef([window.innerWidth, window.innerHeight]);
   function handlePassportChange(event) {
      let current = event.target.value;
      setPassport(current);
      
      // regular expression to validate passport number
      const regex = /^[A-PR-WY][1-9]\d\s?\d{4}[1-9]$/;
      if (!regex.test(passport)) {
         setMessage("is Valid Passport Number");
      } else {
         setMessage("is Invalid Passport Number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Regular expression </i> to validate passport number in ReactJS {" "}
         </h3>
         <input type = "text" value = {passport} onChange = {handlePassportChange} />
         <p>
            {" "}
            {passport} {message}
         </p>
      </div>
   );
}
export default App; 

Output

Users learned to validate passport numbers in this tutorial. We have used the validator NPM package in the first approach and regular expression in the second approach. Users can use the validator NPM package as it also allows them to validate the passport number according to country.