Confirm Password validation in JavaScript
Welcome to The CodeWithRandom blog. In this blog, we learn how to create a Password Validation Using JavaScript.
We use If / Else to Check Password Validation Using JavaScript.
Following paremeters must be needed in confirm password validation
1) First letter of the password should be capital.
2) Password must contain a special character (@, $, !, &, etc).
3) Password length must be greater than 8 characters.
4) One of the most important that the password fields should not be empty.
I hope you enjoy our blog so let’s start with a basic HTML Structure for Password Validation Input.
HTML Code For Password Validation
<!DOCTYPE html>
<html>
<head>
<title>Tip Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Main Part -->
<div class="container">
<!-- Form Start For Password -->
<form action="#">
<!-- 1st Input Of Password -->
<input type="password" class="password" id="password" placeholder="your password" onkeyup='check()'>
<!-- 2nd Input Of Password -->
<input type="password" id="checkPassword" class="password" placeholder="confirm your password" onkeyup='check()'>
<!-- Paragraph indicate -->
<p id="alertPassword"></p>
</form>
</div>
<!-- js is here -->
<script src="app.js"></script>
</body>
</html>
There is all the HTML Code for the Password Validation Input. Now, you can see an output with Only html code. Then we write CSS Code to style Our Input Field of password and Add JavaScript Code To Check and Confirm Password.
Html Code Output
CSS Code For Password Validation
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,900&display=swap');
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
background: #232323;
display: flex;
justify-content: center;
align-items: center;
}
form {
flex-direction: column;
display: flex;
width: 500px;
}
.row {
position: relative;
}
input.password {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid #fff;
padding: 0 0 20px 0;
margin-top: 50px;
font-family: 'Poppins';
color: #fff;
outline: none;
font-size: 16px;
letter-spacing: 2px;
}
span {
width: 100%;
display: flex;
margin: 20px 0px 0px 0px;
font-family: 'Poppins';
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
display: flex;
align-items: center
}
i, .far {
margin-right: 15px
}
Html + CSS Updated Output
JavaScript Code For Password Validation
// Check Function Start
var check = function() {
// We use If ,Else For password
// if password value same = to checkPassword
if (document.getElementById('password').value == document.getElementById('checkPassword').value)
// then run this function
{
document.getElementById('alertPassword').style.color = '#8CC63E';
document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-check-circle"></i>Match !</span>';
}
// OtherWise run this function
else {
document.getElementById('alertPassword').style.color = '#EE2B39';
document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-exclamation-triangle"></i>not matching</span>';
}
}
50+ Html ,Css & Javascript Projects With Source Code
Final Output Confirm Password validation in JavaScript
Live Preview Of Confirm Password validation in JavaScript
Now that we have completed our Confirm Password validation. Here is our updated output with Html, CSS and JavaScript. Hope you like the Password Validation Using JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Password validation in JavaScript is essential since it allows the user to create a secure password and prevents password cracking.
Thank you for visiting!!
In this post, we learn how to create a Password Validation Using JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
Code by – Kaio Almeida
