Set PIN validation with JavaScript?

Javascript Web Development Front End Technology

In this article, we will be discussing how to set up pin validation using JavaScript. We will cover topics such as creating a prompt for users to enter their pin number, validating the user's input against a stored value, and returning an appropriate response based on the result of the comparison.

Data validation is the procedure used to make sure that the user input is accurate, reliable, and tidy. The user has entered a valid date, text in a numeric field, and all needed fields have been filled out, according to typical validation procedures.

We can validate pin on the basis of length and type of pin must be string etc. let’s look into the following examples to understand more about pin validation with JavaScript.

Example

In the following example we are using simple regex expression to the script to form the validation in the script.

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial1"></p>
   <p id="tutorial2"></p>
   <p id="tutorial3"></p>
   <p id="tutorial4"></p>
   <script>
      function validatePIN (pin) {
         return /^(\d{4}|\d{6})$/.test(pin);
      }
      document.getElementById("tutorial1").innerHTML= JSON.stringify(validatePIN('1234'));
      document.getElementById("tutorial2").innerHTML=JSON.stringify(validatePIN('123'));
      document.getElementById("tutorial3").innerHTML= JSON.stringify(validatePIN('123456'));
      document.getElementById("tutorial4").innerHTML=JSON.stringify(validatePIN('12345'));
   </script>
</body>
</html>

When the script is executed, the event gets triggered, making the given pin conditions check with the given regular expression and providing the values. If it passes the condition, it returns true; otherwise, it returns false.

Example

Consider the other example, where we are creating an input field and button by calling the addEventListener function and validating the pin.

<!DOCTYPE html>
<html>
<body>
   <input type="text" />
   <button>validate pin</button>
   <script>
      var validatePIN = (args) => {[...args] = args; return args.every(v => v.match(/\d/)) && [4, 6].some(n => args.length === n)};
      document.querySelector("button")
      .addEventListener("click", (e) => alert(validatePIN(e.target.previousElementSibling.value)))
   </script>
</body>
</html>

On running the above script, the web-browser displays the input field along with a button on the webpage. When the user enters the pin in the input field and clicks the button, the event is triggered, and it checks the condition to see if it was met, and if so, it displays a "true" or "false" alert.

Example

Let’s execute the below code, in which we added an extra condition that checks that the string that was converted to a number is actually a number; and returns a true or false value.

<!DOCTYPE html>
<html>
<body>
   <script>
      function test(pin) {
         if ((pin.length === 5 || pin.length === 7) && Number.isInteger(+pin)) {
            return true
         } else {
            return false
         }
      }
      document.write(test('12345')+"<br>");
      document.write(test('asbcf'));
   </script>
</body>
</html>

When the script gets executed, the event gets triggered, which checks the pin conditions and also checks whether the entered number is valid or not and displays the value. In our case, it will display true for the first pin and false for the second pin.

Example

Consider the following example, in which we are running a condition to determine whether the passed pin is valid or not. It will return "Pin is valid" if it passes the condition, or else it will display "Pin is not valid."

<!DOCTYPE html>
<html>
<body>
   <script>
      function simpleValidationForPin(pinValues) {
         if (!(typeof pinValues === "string" && !~pinValues.indexOf('.') && !isNaN(Number(pinValues)) && (pinValues.length === 2 || pinValues.length === 4))) {
            return false;
         } else {
            return true;
         }
      }
      if (simpleValidationForPin("0000.00") == true)
         document.write("This is a valid pin")
      else
         document.write("This is not a valid pin"+"<br>")
      if (simpleValidationForPin(66) == true)
         document.write("This is a valid pin")
      else
         document.write("This is not a valid pin"+"<br>")
      if (simpleValidationForPin("4444") == true)
         document.write("This is a valid pin"+"<br>")
      else
         document.write("This is not a valid pin")
      if (simpleValidationForPin("66") == true)
         document.write("This is a valid pin"+"<br>")
      else
         document.write("This is not a valid pin")
      if (simpleValidationForPin("666") == true)
         document.write("This is a valid pin")
      else
         document.write("This is not a valid pin")
   </script>
</body>
</html>

On running the above script, the web-browser displays the values that occurred when the event got triggered on running the script, checking the condition followed by the ‘if’ statement.