Create OTP Code Verification Form in HTML CSS & JavaScript

CSSHTMLJavaScript

Hello Friends, In this tutorial we will learn how to create OTP Code Verification Form in HTML CSS & JavaScript and Check Enter OTP is valid or not valid using JavaScript. 


Html Code :

<!DOCTYPE html>
<html>
  <head>
    <title>OTP Code Verification Form</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
      }
      .container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
      }
      h1 {
        text-align: center;
      }
      form {
        background-color: #f2f2f2;
        border-radius: 5px;
        padding: 20px;
      }
      input[type="number"] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      button[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
      }
      button[type="submit"]:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>OTP Code Verification</h1>
      <form id="otpForm">
        <label for="otpCode">Enter the OTP code sent to your phone:</label>
        <input type="number" id="otpCode" name="otpCode" maxlength="6" minlength="6" required>
        <button type="submit">Verify OTP Code</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS Code:

The CSS code above is embedded within the head of the HTML document.

JavaScript Code:

const form = document.getElementById("otpForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  const otpCode = document.getElementById("otpCode").value;
  if (otpCode.length === 6 && /^\d+$/.test(otpCode)) {
    alert("OTP code is valid");
    // Here you can add your own code to send the OTP code to the server for validation.
  } else {
    alert("OTP code is invalid");
  }
});


Explanation:

This code creates an OTP code verification form with one input field and a submit button. The input field is set to type "number" and has a minimum length and maximum length of 6, and is required. The JavaScript code adds an event listener to the form's submit event, preventing the default form submission behavior. It then gets the value of the OTP code input field and validates it using a regular expression that checks if the input contains exactly 6 digits. If the OTP code is valid, an alert is shown saying "OTP code is valid", and you can add your own code to send the OTP code to the server for validation. If the OTP code is invalid, an alert is shown saying "OTP code is invalid".

     
Updated on 01-Mar-2023 19:22:17

151 Views

Previous Page Next Page  
Advertisements

ads