Password Strength
Required:
HTML
CSS
JS
Demo
Password must contain the following:
A lowercase letter
A capital (uppercase) letter
A number
Minimum 8 characters
HTML
<form><label for="username">Username</label><input type="text" id="username" name="username" required><label for="password">Password</label><input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required><input type="submit" value="Submit"></form><div id="message"><h3>Password must contain the following:</h3><p id="letter" class="invalid">A <b>lowercase</b> letter</p><p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p><p id="number" class="invalid">A <b>number</b></p><p id="length" class="invalid">Minimum <b>8 characters</b></p></div>
CSS
.valid {color: green;}.valid:before {position: relative;left: -35px;content: "?";}.invalid {color: red;}.invalid:before {position: relative;left: -35px;content: "?";}
Javascript
var myInput=document.getElementById("password");var letter=document.getElementById("letter");var capital=document.getElementById("capital");var number=document.getElementById("number");var length=document.getElementById("length");myInput.onfocus=function(){document.getElementById("message").style.display="block"};myInput.onblur=function(){document.getElementById("message").style.display="none"};myInput.onkeyup=function(){var b=/[a-z]/g;if(myInput.value.match(b)){letter.classList.remove("invalid");letter.classList.add("valid")}else{letter.classList.remove("valid");letter.classList.add("invalid")}var c=/[A-Z]/g;if(myInput.value.match(c)){capital.classList.remove("invalid");capital.classList.add("valid")}else{capital.classList.remove("valid");capital.classList.add("invalid")}var a=/[0-9]/g;if(myInput.value.match(a)){number.classList.remove("invalid");number.classList.add("valid")}else{number.classList.remove("valid");number.classList.add("invalid")}if(myInput.value.length>=8){length.classList.remove("invalid");length.classList.add("valid")}else{length.classList.remove("valid");length.classList.add("invalid")}};
Fatal error: Uncaught Error: Call to undefined function seo_url() in /home/sabalico/public_html/blueprint/pages/documentation.php:186Stack trace:#0 /home/sabalico/public_html/index.php(86): include()#1 {main} thrown in /home/sabalico/public_html/blueprint/pages/documentation.php on line 186