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

Master Template

Login and Signup form/page

Make Login and Signup form in bootstrap

Product listing card