Create an OTP Verification Form in HTML CSS & JavaScript

Last Updated : 26 Jul, 2024

When the application is loaded, there is a button through which the user can generate the OTP. Once the user generates the OTP, the form for verification becomes visible, the user needs to enter the correct OTP that is generated. When the user enters the OTP in the input field, and if the OTP matches then the OTP gets verified and the user can generate more OTP. If the OTP is not matched, then the Generate OTP button remains disabled til the OTP is been verified.

Preview Image:

Screenshot-(1327)

Approach:

Firstly, create the overall layout or the structure of the application using HTML elements like <div>, <h1>, <button>, <input> etc.
When the structure becomes ready, then the next task is to style the application with attractive styling properties of CSS. Some of the styling properties that we have used to style the application are background-color, margin, text-align, font-size etc.
Once the styling of the application is done, then we can write the code for the functionality of verification in the JavaScript file.
Using the Math.floor() and Math.random() functions in JavaScript, we generate the 4-digit numerical OTP when the Generate OTP button is clicked by the user.
Using the if-else conditions, we are verifying the OTP by checking the Generated OTP and Inputted OTP matching. If this matches then the OTP gets verified and the Generate OTP button gets enabled for the user to generate more OTP.

Example: This example describes the basic implementation for an OTP Verification Form in HTML, CSS & JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GFG OTP Verification</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="header">
                <h1 style="color:green">
                    GeeksforGeeks
                </h1>
                <h2 style="color:black">
                    OTP Verification
                </h2>
            </div>
            <div class="content" id="content">
                <button id="generateBtn" onclick="OTPFn()">
                    Generate OTP
                </button>
                <div id="otpForm" class="otp-form">
                    <input type="text" id="userOTP" placeholder="Enter OTP">
                    <button onclick="OTPVerifyFn()">
                        Verify
                    </button>
                </div>
                <div id="successMessage" class="success-message">
                    <i class="fas fa-check"></i>
                    <p>Congratulations Geek! OTP is Verified!</p>
                </div>
                <div id="errorMessage" class="error-message"></div>
                <div id="timer" class="timer"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(to right, #667eea, #764ba2);
}

.container {
    width: 100%;
    max-width: 400px;
}

.card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.header {
    background-color: #fbf96f;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.content {
    padding: 20px;
}

button {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

.otp-form {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

input {
    width: calc(100% - 30px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

.success-message {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    color: #4CAF50;
}

.error-message {
    color: #e74c3c;
    margin-top: 10px;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.success-message p {
    margin: 10px 0;
}

.otp-display {
    margin-top: 20px;
    text-align: center;
}

.otp-text {
    font-size: 18px;
    margin: 0;
}

input:disabled {
    background-color: #f2f2f2;
    color: #a0a0a0;
    cursor: not-allowed;
}

.timer {
    margin-top: 10px;
    font-size: 14px;
}

JavaScript

let otpGen;
let timer;
let secondsRemaining = 10;

function OTPFn() {
    const btn = document.getElementById('generateBtn');
    btn.disabled = true;
    clearFn();
    otpGen = Math.floor(1000 + Math.random() * 9000);
    const temp = document.getElementById('content');
    const showOtp = document.createElement('div');
    showOtp.classList.add('otp-display');
    showOtp.innerHTML = `
        <p class="otp-text">Generated OTP: 
            <span>${otpGen}</span>
        </p>`;
    temp.appendChild(showOtp);
    document.getElementById('otpForm').style.display = 'flex';
    startTimer();
}

function clearFn() {
    const prevOtp = document.querySelector('.otp-display');
    if (prevOtp) {
        prevOtp.remove();
    }
    resetTimer();
    document.getElementById('errorMessage').innerText = '';
    enableInputField();
}

function OTPVerifyFn() {
    const userOtp = document.getElementById('userOTP').value;
    if (userOtp === "") {
        alert("Please enter OTP.");
        return;
    }
    const enterOtp = parseInt(userOtp);
    if (!isNaN(enterOtp)) {
        if (secondsRemaining > 0) {
            if (enterOtp === otpGen) {
                showMsgFn();
                document.getElementById('generateBtn').disabled = false;
                resetTimer();
                enableInputField();
            } else {
                document.getElementById('errorMessage').innerText = 'Invalid OTP. Please try again.';
            }
        } else {
            document.getElementById('errorMessage').innerText = 'OTP Expired. Please generate a new OTP.';
            resetTimer();
        }
    } else {
        alert("Invalid OTP. Please try again.");
    }
}

function showMsgFn() {
    const successMessage = document.getElementById('successMessage');
    successMessage.style.animation = 'fadeIn 1s forwards';
    successMessage.style.display = 'flex';
    setTimeout(() => {
        successMessage.style.display = 'none';
    }, 3000);
}

function startTimer() {
    timer = setInterval(function () {
        if (secondsRemaining <= 0) {
            clearInterval(timer);
            document.getElementById('generateBtn').disabled = false;
            document.getElementById('errorMessage').innerText = 'OTP Expired. Please generate a new OTP.';
            resetTimer();
            disableInputField();
        } else {
            document.getElementById('timer').innerText = `Time Remaining: ${secondsRemaining} seconds`;
            secondsRemaining--;
        }
    }, 1000);
}

function resetTimer() {
    clearInterval(timer);
    document.getElementById('timer').innerText = '';
    secondsRemaining = 10;
}

function disableInputField() {
    document.getElementById('userOTP').disabled = true;
}

function enableInputField() {
    document.getElementById('userOTP').disabled = false;
}

function clearFields() {
    document.getElementById('userOTP').value = '';
    clearFn();
}