Password Validation / password validation
Password Strength checking by validating in HTML CSS and JavaScript to enforce the strength of password to avoid threat of security.
we define some major requirement of password which is clearly mention in detail in this video. if password is not match the requirement then form will be not submitting even user trying multiple times to submit the form. KEY Features of password validation password must be contain 8 character one upper case alphabet one lower case letter one special character optimize the code and strengthen password
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Validation</title>
<!-- link stylesheet here -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="fluid">
<div class="text">
<h1>Password Strength / Password Validation</h1>
</div>
<div class="b">
<div class="container">
<form action="#">
<label for="username">Username</label>
<input type="text" name="username" id="username" required="">
<label for="psw">Password</label>
<input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number one lowecase letter one upper case latter and 8 or more characters" required="">
<input type="submit" value="submit">
</form>
<div id="message">
<h3>Password must contain the following criteria</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>uppercase</b> letter</p>
<p id="number" class="invalid">A <b>numbers</b></p>
<p id="length" class="invalid">Minimum <b>characters</b></p>
</div>
</div>
</div>
</div>
CSS Code
body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.fluid {
box-shadow: 0 0 30px 0;
padding: 10px;
margin: 5px;
width: 50%;
min-width: 300px;
}
.b {
box-shadow: 0 0 20px 0;
padding: 15px;
margin: 6px;
border: 1px solid rgb(6, 145, 98);
}
.container {
border-radius: 20px;
font-family: sans-serif;
box-shadow: 0 0 30px 0 rgb(206, 25, 25);
background-color: #f1f1f1;
padding: 20px;
border: 2px solid rgb(9, 112, 73);
}
.text h1 {
text-align: center;
font-family: sans-serif;
font-weight: bold;
font-size: 22px;
margin-bottom: 4px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #1b1988;
box-shadow: 0 0 10px 0 rgb(14, 187, 164);
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 10px;
font-size: 16px;
}
input[type=submit] {
background-color: rgb(3, 101, 139);
color: white;
font-size: 18px;
box-shadow: 0 10px 20px 0 black;
border: none;
}
.container label {
font-size: 16px;
font-weight: bold;
}
#message{
display: none;
background-color: #f1f1f1;
box-shadow: 0 0 30px 0;
color: black;
position: relative;
padding: 20px;
}
#message p {
padding: 0 35px;
}
#message h3, b, p {
font-size: 16px;
}
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "OK";
}
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "X";
}
JavaScript code
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// when the user click on password field show message
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// when the user click outside password field then show message
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// when the user start something inside the password field
myInput.onkeyup = function() {
// Validate the lowercase letter
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate the uppercase letter
var upperCaseLetters = /[a-z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate the lowercase letter
var lowerCaseLetters = /[A-Z]/g;
if(myInput.value.match(lowerCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate the numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate lenght
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
Previous video links How to make a Login and Signup page in HTML CSS https://youtu.be/78Wec56WrDM How to make Progress bar in HTML CSS JavaScript https://youtu.be/O-Ap-uDrcnw
Watch Video for more details
Comments
Post a Comment