Password Validation In Javascript | Confirm Password Validation – Codewithrandom







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.

output

Password Validation In Javascript | Confirm Password Validation - Codewithrandom

CSS code

 @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


Password Validation In Javascript | Confirm Password Validation - Codewithrandom

Javascript code

  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

Password Validation In Javascript | Confirm Password Validation - Codewithrandom

Password Validation In Javascript | Confirm Password Validation - Codewithrandom

Now that we have completed our javascript section,  Here is our updated output with javascriptHope 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

Share on:

Leave a Comment