Introduction:
In this tutorial, we’ll build a simple password validation system with JavaScript. We’ll create an HTML form that checks if the passwords entered in the password and confirm password fields match. The system will display appropriate messages to the user and style them based on the results. You will also learn how to use basic DOM manipulation, handle user input, and apply styles dynamically based on conditions.
Things You Will Learn:
How to handle user input with JavaScript
DOM manipulation to validate form data
How to display messages dynamically
How to apply styles based on validation results
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ‘Confirm Password | HTML, CSS & Javascript’. Inside this folder we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Confirm Password</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
<label for="password">Password</label>
<input type="password" id="password" placeholder="Your password here" />
<label for="cnfrm-password">Confirm Password</label>
<input
type="password"
id="cnfrm-password"
placeholder="Confirm placeholder here"
/>
<p id="message"></p>
<input type="button" onclick="checkPassword()" value="SUBMIT" />
</form>
<script src="script.js"></script>
</body>
</html>
CSS:
Let’s add some style to the layout. Copy the code provided and include it in your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #fecc3d;
}
form {
background-color: #ffffff;
width: 450px;
padding: 50px 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 8px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.15);
}
label {
font-weight: 500;
color: #101030;
}
input {
display: block;
width: 100%;
margin-top: 5px;
padding: 12px;
border-radius: 5px;
outline: none;
color: #101030;
}
#password {
margin-bottom: 20px;
}
input[type="password"] {
border: 2px solid #c2c2c2;
}
input[type="button"] {
background-color: #7f3fff;
border: none;
color: #ffffff;
letter-spacing: 1px;
cursor: pointer;
}
p {
font-size: 14px;
margin: 15px 0;
display: inline-block;
color: #ffffff;
padding: 5px 10px;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
function checkPassword() {
//Cache DOM elements
const passwordField = document.getElementById("password");
const confirmPasswordField = document.getElementById("cnfrm-password");
const message = document.getElementById("message");
//Get values
const password = passwordField.value.trim();
const confirmPassword = confirmPasswordField.value.trim();
//Log values for debugging
console.log("password:", password);
console.log("Confirm password:", confirmPassword);
//validation logic
if (!password || !confirmPassword) {
alert("Both the password fields are required");
message.textContent = "";
return;
}
if (password === confirmPassword) {
message.textContent = "Passwords Match";
message.style.backgroundColor = "#1dcd59";
} else {
message.textContent = "Passwords Don't Match";
message.style.backgroundColor = "#ff4d4d";
}
}
Conclusion:
In this tutorial, we built a simple password validation system using JavaScript. We learned how to manipulate the DOM, validate user input, and provide dynamic feedback with styled messages. You can use this technique in your own forms to improve the user experience and prevent incorrect password entries. Check out the video tutorial for a deeper understanding of the process!
