- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
Create OTP Code Verification Form in HTML CSS & JavaScript
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".
- Related Questions & Answers
- create an Attractive Poll UI Design using HTML CSS & JavaScript
- How To Create AdBlock Detector using HTML & JavaScript
- How to print page using JavaScript ?
- Create Minion Eyes Toggle using Pure CSS
- How to Use the JavaScript Fetch API to Get Data from an API?
- How to Add Scroll Animations to a Page with JavaScript’s Intersection Observer API
- Download YouTube Video Thumbnail in PHP & JavaScript
- How to Create Text To Speech Converter in HTML & JavaScript
- Responsive Registration Form in HTML and CSS
- How to Change a Web Page’s Title Dynamically using JavaScript ?
- How to create Multi Tags Input Box in HTML CSS & JavaScript
- How to Build Weather App using HTML CSS & JavaScript
- Which is default HTML5 skeleton ?
- How To Create Superman Mode Minion Using HTML, CSS & JavaScript
- How To Create Minion Eyes That Follows Mouse Cursor
- How To Create New Year Countdown using HTML & Javascript
ads