Check Password Confirm Password & Show Hide
Hello Dear readers, Today in this blog you’ll Find Code Check Password Confirm Password & Show Hide in Javascript. Earlier I have shared many blogs on Check Password Confirm Password & Show Hide and now I’m going to create a Check Password Confirm Password & Show Hide in Javascript.
HTML CODE :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Check Password Confirm Password & Show Hide in Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>Check Password Confirm Password & Show Hide <br/> in Javascript</header>
<form action="#">
<div class="error-text"></div>
<div class="field">
<input onkeyup="active()" id="pswrd_1" type="password" placeholder="Enter Password">
</div>
<div class="field">
<input onkeyup="active_2()" id="pswrd_2" disabled type="password" placeholder="Confirm Password">
<div class="show">
SHOW
</div>
</div>
<button disabled>Check</button>
</form>
</div>
<script>
const pswrd_1 = document.querySelector("#pswrd_1");
const pswrd_2 = document.querySelector("#pswrd_2");
const errorText = document.querySelector(".error-text");
const showBtn = document.querySelector(".show");
const btn = document.querySelector("button");
function active(){
if(pswrd_1.value.length >= 8){
btn.removeAttribute("disabled", "");
btn.classList.add("active");
pswrd_2.removeAttribute("disabled", "");
}else{
btn.setAttribute("disabled", "");
btn.classList.remove("active");
pswrd_2.setAttribute("disabled", "");
}
}
btn.onclick = function(){
if(pswrd_1.value != pswrd_2.value){
errorText.style.display = "block";
errorText.classList.remove("matched");
errorText.textContent = "Error! Confirm Password Not Match";
return false;
}else{
errorText.style.display = "block";
errorText.classList.add("matched");
errorText.textContent = "Nice! Confirm Password Matched";
return false;
}
}
function active_2(){
if(pswrd_2.value != ""){
showBtn.style.display = "block";
showBtn.onclick = 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";
}
}
</script>
</body>
</html>
CSS CODE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
align-items: center;
justify-content: center;
display: flex;
height: 100vh;
width: 100%;
background-image: linear-gradient(to right top, #136ef8, #7861f0, #aa50e1, #cf38cc, #eb12b2);
}
.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-top: 5px;
font-size: 25px;
font-weight: 600;
line-height: 33px;
}
.container form{
margin: 5px 8px;
}
.container form .error-text{
background: #F8D7DA;
padding: 8px 0;
border-radius: 5px;
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;
}
form .field input{
width: 100%;
height: 100%;
border: 1px solid lightgrey;
padding-left: 15px;
outline: none;
border-radius: 5px;
font-size: 17px;
transition: all 0.3s;
}
form .field input::placeholder{
font-size: 16px;
}
form .field input:focus{
border-color: #27ae60;
box-shadow: inset 0 0 3px #2fd072;
}
form .field .show{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: 600;
user-select: none;
cursor: pointer;
display: none;
}
form .field .show.active{
color: #27ae60;
}
form button{
width: 100%;
height: 45px;
margin: 3px 0 10px 0;
border: none;
outline: none;
background: #27ae60;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
cursor: no-drop;
opacity: 0.7;
}
form button.active{
cursor: pointer;
opacity: 1;
transition: all 0.3s;
}
form button.active:hover{
background: #219150;
}
0 Comments