Table of Contents
Password Validation In Javascript | Confirm Password Validation – Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Password Validation In Javascript. We use HTML, Css, and javascript for Password Validation In Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Password Validation In Javascript.
HTML Code
<div class="container">
<form action="#">
<input type="password" class="password" id="password" placeholder="your password" onkeyup='check()'>
<input type="password" id="checkPassword" class="password" placeholder="confirm your password" onkeyup='check()'>
<p id="alertPassword"></p>
</form>
</div>
There is all the HTML code for the Password Validation. Now, you can see an output with Password Validation then we write javascript 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
}
Css Updated output
var check = function() {
if (document.getElementById('password').value ==
document.getElementById('checkPassword').value) {
document.getElementById('alertPassword').style.color = '#8CC63E';
document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-check-circle"></i>Match !</span>';
} else {
document.getElementById('alertPassword').style.color = '#EE2B39';
document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-exclamation-triangle"></i>not matching</span>';
}
}
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Password Validation In Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create a Password Validation In Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – Kaio Almeida