Password strength meter

Password strength meter


i’m trying to add a password strength to my code using javascript,it works separately when i use a just a textbox, but when i add it to my code it doesn’t work this is my code

<!DOCTYPE html>
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
        <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="infosecure.css"/>
        <title>user sign up</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" >
            var attempt=3;
            function chkpass()
                var init=document.getElementById("first");
                var sec=document.getElementById("second");
                    alert("You did not enter a password \n" + "please enter one now");
                    return false;
                if(init.value != sec.value)
                    alert("The passwords you entered are not the same \n");
                    return false;
                   return true;
        <h2 align="center"> File sharing made easier </h2>
                <a href="home.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="group.html">Group</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="groupuser.html">Group User</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="groupadmin.html">Group Admin</a> > <a href="groupadminsignup.html">Sign Up</a>
            <h3 align="center">Enter your valid details</h3>
            <form action="insert1.php" method="POST">
                    Email-ID:<input type="text" name="email"   required/><br />
                    D.O.B:<input type="text" name="dob" size="10"  placeholder="DD/MM/YY" required/><br />
                    User name:<input type="text" name="uname" size="20"  required/><br />
                    Password:<input id="first" type="password" name="pass"  size="10" onkeyup="CheckPasswordStrength(this.value)"  required/><span id="password_strength"></span><br />
                    <br />
                    Verify password:<input id="second" type="password" name="vpass"  size="10" required/><br />
                    <div class="tim">
                        <button type="reset" class="btn-lg btn-primary">&nbsp;<i class="fa fa-undo" aria-hidden="true">&nbsp;Reset&nbsp;</i></button>&nbsp;&nbsp;
                        <button type="submit" name="submit" onclick="chkpass()" class="btn-lg btn-primary"><i class="fa fa-chevron-circle-right" aria-hidden="true">&nbsp;Submit</i></button>
        <script type="text/javascript">
    function CheckPasswordStrength(password) 
        var password_strength = document.getElementById("password_strength");
         //TextBox left blank.
            if (password.length == 0) {
                password_strength.innerHTML = "";

            //Regular Expressions.
            var regex = new Array();
            regex.push("[A-Z]"); //Uppercase Alphabet.
            regex.push("[a-z]"); //Lowercase Alphabet.
            regex.push("[0-9]"); //Digit.
            regex.push("[$@$!%*#?&]"); //Special Character.

            var passed = 0;

            //Validate for each Regular Expression.
            for (var i = 0; i < regex.length; i++) {
                if (new RegExp(regex[i]).test(init)) {

            //Validate for length of Password.
            if (passed > 2 && password.length > 8) {

            //Display status.
            var color = "";
            var strength = "";
            switch (passed) {
                case 0:
                case 1:
                    strength = "Weak";
                    color = "red";
                case 2:
                    strength = "Good";
                    color = "darkorange";
                case 3:
                case 4:
                    strength = "Strong";
                    color = "green";
                case 5:
                    strength = "Very Strong";
                    color = "darkgreen";
            password_strength.innerHTML = strength;
   = color;

thanks in advance


I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


Thank you,
didn’t know that will follow from now.


Better if you present your code on something like jsfiddle so we can debug it more easily.


I made a couple of changes:

function CheckPasswordStrength doesn’t know about init so I added it:
if (new RegExp(regex[i]).test(init)) { here it fails.

Also the values are not getting tested here:

var init=document.getElementById("first");
var sec=document.getElementById("second");

You need .value

NB. I removed “required” for easy of testing from some of the fields.


Thanks, man! it worked.