How to check password strength / length / requirements

index.html

<div class="row" id="idpassword">
	<div class="col-sm-6">
		<div class="form-group input_fields">
			<input class="form-control" type="password" name="password" id="password" required>
			<p class="show_hide" id="pass1">Show</p>
			<label for="password">Password </label>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="form-group input_fields">
			<input class="form-control" type="password" name="confirmpass" id="confirmpass" required>
			<p class="show_hide" id="pass2">Show</p>
			<label for="confirmpass">Password Confirmation </label>
		</div>
	</div>
</div>

<!--- Password requires --->
<div class="pass_suggession">
	<p><strong>Your password requires the following:</strong></p>
	<ul>
		<!--- add class "done" with each li when the requirement if fulfill --->
		<li id="pwd-restriction-upperlower" name="pwd-restriction-upperlower">One uppercase and lowercase letter</li>
		<li id="pwd-restriction-number" name="pwd-restriction-number">One number</li>
		<li id="pwd-restriction-special" name="pwd-restriction-special">One symbol</li>
		<li id="pwd-restriction-length" name="pwd-restriction-length">At least 8 characters</li>
	</ul>
</div>

scripts.js

	$(document).ready(function () {

		$("#password").on("keyup", function (evt) {

			var pwdLength = /(?=.{8,})/;
			var pwdUpper = /[A-Z]+/;
			var pwdLower = /[a-z]+/;
			var pwdNumber = /[0-9]+/;
			var pwdSpecial = /(?=.*[!@#$%^&*])/;

			var s = $('#password').val(); // get the current password value

			if (pwdLength.test(s)) {
				$('#pwd-restriction-length').removeClass("notdone");
				$('#pwd-restriction-length').addClass("done");
			} else {
				$('#pwd-restriction-length').removeClass("done");
				$('#pwd-restriction-length').addClass("notdone");
			}
			if (pwdUpper.test(s) && pwdLower.test(s)) {
				$('#pwd-restriction-upperlower').removeClass("notdone");
				$('#pwd-restriction-upperlower').addClass("done");
			} else {
				$('#pwd-restriction-upperlower').removeClass("done");
				$('#pwd-restriction-upperlower').addClass("notdone");
			}
			if (pwdNumber.test(s)) {
				$('#pwd-restriction-number').removeClass("notdone");
				$('#pwd-restriction-number').addClass("done");
			} else {
				$('#pwd-restriction-number').removeClass("done");
				$('#pwd-restriction-number').addClass("notdone");
			}
			if (pwdSpecial.test(s)) {
				$('#pwd-restriction-special').removeClass("notdone");
				$('#pwd-restriction-special').addClass("done");
			} else {
				$('#pwd-restriction-special').removeClass("done");
				$('#pwd-restriction-special').addClass("notdone");
			}


		});

	});

style.css

/* Password suggession */
.pass_suggession {
    background-color: #EFF2F5;
    padding: 15px 20px;
}
.pass_suggession ul li {
    position: relative;
    padding-left: 30px;
    margin: 0 0 10px;
}
.pass_suggession li::before {
    position: absolute;
    left: 0;
    content: "";
    background-color: #C3CCD4;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.pass_suggession li.done::before {
    background-color: #123456;
}
.pass_suggession li::after {
    position: absolute;
    left: 7px;
    top: 3px;
    content: "";
    width: 6px;
    height: 12px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
.pass_suggession li.notdone::before {
    background-color: #FC5569;
}
.pass_suggession li.notdone::after {
    position: absolute;
    left: 5px;
    top: 0px;
    content: "\00d7";
    width: 6px;
    height: 12px;
    border-bottom: none;
    border-right: none;
    transform: none;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
}