Confirm password is a common feature in web applications that helps to ensure that the user has correctly typed their chosen password. This is especially important when the password is used to secure sensitive information or grant access to restricted resources.
To implement confirm password in JavaScript, you will need to create a form with two password fields: one for the user to enter their password, and another for them to confirm their password. You can then use JavaScript to compare the values of these fields and check whether they match.
To do this, you can use the addEventListener method to attach a change event listener to the confirm password field. This will allow you to execute a function every time the user modifies the field’s value.
Inside the event listener function, you can use the value property of the password fields to get their current values and compare them using the === operator. If the values are equal, it means that the user has correctly confirmed their password. If the values are not equal, you can display an error message or take some other action to prompt the user to enter their password correctly.
It’s also a good idea to include some basic input validation in your confirm password function. For example, you can check that the password is at least a certain length and meets any other requirements (e.g. containing at least one number or special character). This can help to prevent the user from entering a weak or easily guessable password.
In summary, confirm password is a useful feature that can help to ensure the security of your web application by requiring users to correctly type their chosen password. By using JavaScript to compare the values of two password fields and perform basic input validation, you can implement confirm password in a reliable and user-friendly way.
Today, we’ll be learning how to create a confirm password feature using HTML, CSS, and JavaScript. While I’ve shared many articles and videos on JavaScript projects in the past, this time we’ll be tackling something new. Let’s get started!
Video tutorial on creating a confirm password feature using HTML, CSS, and JavaScript:
As mentioned in the video tutorial on creating a confirm password feature using HTML, CSS, and JavaScript, if you’re finding the video to be boring, you can find the code below to copy or download.
To create this feature, you’ll need to create two files – an HTML file and a CSS file. Once you’ve created these files, simply paste the provided code into each file.
First, create an HTML document called ‘index.html’ and paste the given code into it. Remember to save the file with a ‘.html’ extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1>0">
<link rel="stylesheet" href="https://stackpath>bootstrapcdn>com/font-awesome/4>7>0/css/font-awesome>min>css">
<link rel="stylesheet" href="style>css">
<title>Document</title>
</head>
<body>
<div class="container">
<header>Sign Up</header>
<form action="#" onsubmit="return confirm();" method="POST">
<div class="error_text"></div>
<div class="field">
<input type="text" placeholder="Username">
</div>
<div class="field">
<input type="email" placeholder="Enter your Email">
</div>
<div class="field">
<input onkeyup="active()" type="password" id="pswrd_1" placeholder="Enter Password">
</div>
<div class="field">
<input type="password" onkeyup="active_2()" id="pswrd_2" disabled placeholder="Confirm Password">
<div class="showBtn">Show</div>
</div>
<input type="submit" value="Sign Up" class="btn" disabled>
</form>
</div>
<script>
const pswrd_1 = document>querySelector('#pswrd_1');
const pswrd_2 = document>querySelector('#pswrd_2');
const error_Text = document>querySelector('>error_text');
const btn = document>querySelector('>btn');
const showBtn = document>querySelector('>showBtn');
function active(){
if(pswrd_1>value>length >= 6){
btn>removeAttribute("disabled","");
btn>classList>add("active");
pswrd_2>removeAttribute("disabled","");
}else{
btn>setAttribute("disabled","");
btn>classList>remove("active");
pswrd_2>setAttribute("disabled","");
}
}
function active_2(){
if(pswrd_2>value != ""){
showBtn>style>display = "block";
showBtn>addEventListener('click', function(){
if((pswrd_1>type == "password") && (pswrd_2>type == "password")){
pswrd_1>type = "text";
pswrd_2>type = "text";
this>textContent = "Hide";
this>classList>add("active");
}else{
pswrd_1>type = "password";
pswrd_2>type = "password";
this>textContent = "Show";
this>classList>remove("active");
}
})
}else{
showBtn>style>display = "none";
}
}
function confirm(){
if(pswrd_1>value != pswrd_2>value){
error_Text>style>display = "block";
error_Text>textContent = "Error! Confirm Password Not Match";
error_Text>classList>remove("matched");
return false;
}else{
error_Text>style>display = "block";
error_Text>textContent = "Nice! Confirm Password Matched";
error_Text>classList>add("matched");
return false;
}
}
</script>
</body>
</html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #f2f2f2;
}
.container
{
background: #fff;
padding: 20px 30px;
width: 420px;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.container header
{
padding: 20px 0px;
font-size: 25px;
line-height: 33px;
font-weight: 600;
}
.container form
{
margin: 5px 8px;
}
.container form .error_text
{
background: #f8d7da;
padding: 8px 0px;
border-radius: 3px;
color: #8b3e46;
border: 1px solid #f5c6cb;
display: none;
}
.container form .error_text.matched
{
background: #d4edda;
color: #588c64;
border-color:#c3e6cb;
}
.container form .field
{
width: 100%;
height: 45px;
display: flex;
margin: 15px 0;
position: relative;
}
.container form .field input
{
width: 100%;
height: 100%;
border: 1px solid lightgray;
border-radius: 3px;
padding: 0 15px;
font-size: 18px;
outline: none;
}
.container form .field input:focus
{
border-color: #27ae60;
box-shadow: inset 0 0 3px #2fd072;
}
.container form .field .showBtn
{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
user-select: none;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display: none;
}
.container form .field .showBtn.active
{
color: #27ae60;
}
form .btn
{
width: 100%;
height: 45px;
font-size: 18px;
background: #27ae60;
outline: none;
border: none;
border-radius: 3px;
color: #fff;
font-weight: 500;
cursor: not-allowed;
opacity: 0.7;
}
form .btn.active
{
cursor: pointer;
opacity: 1;
}
form .btn.active:hover
{
background: #219150;
}
Congratulations, you’ve successfully created a confirm password feature using HTML, CSS, and JavaScript! If you’re having trouble with your code or encounter any errors, you can download the source code files by clicking on the provided download button. It’s free – just download the zip file and extract it to access the files.
I hope this helps. Good luck with your project!
