Password Validation Using Html CSS Javascript Bootstrap
Hello, Everyone here I have created a password validation using Html, CSS, Bootstrap, and javascript
Step 1: Create A File anyNameYouWant.html
Step 2: Copy and Paste the below code and run it using any browser
<!DOCTYPE html>
<html>
<head>
<! — bootstrap cnd →
<link
rel=”stylesheet”
href=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=”sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin=”anonymous”
/>
</head>
<body>
<div class=”container”>
<div class=”card”>
<div class=”card-body”>
<div class=”card-title”>
<h1 class=”text-center”>Password Validation</h1>
</div>
<form>
<div class=”form-group”>
<label for=”password”>Password</label>
<input type=”text” class=”form-control” id=”password” />
</div>
<button type=”submit” id=”submitButton” class=”btn btn-primary”>
Submit
</button>
</form>
<div class=”p-3">
<ul class=”list-group”>
<li class=”text-danger” id=”digit-li”>
At list 8 Digit. <span id=”digit”>
<span>✕</span>
</span>
</li>
<li class=”text-danger” id=”capital-li”>
At list one Capital letter. <span id=”capital”>
<span>✕</span>
</span>
</li>
<li class=”text-danger” id=”small-li”>
At list one Small letter. <span id=”small”>
<span>✕</span>
</span>
</li>
<li class=”text-danger” id=”number-li”>
At list one Number. <span id=”number”>
<span>✕</span>
</span>
</li>
<li class=”text-danger” id=”special-li”>
At list one Special character. <span id=”special”>
<span>✕</span>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<! — bootstrap js code start →
<script
src=”https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj”
crossorigin=”anonymous”
></script>
<script
src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity=”sha384–9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN”
crossorigin=”anonymous”
></script>
<script
src=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity=”sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s”
crossorigin=”anonymous”
></script>
<! — bootstrap js code end →
<! — custom script →
<script>
right=`<span>✓</span>`,
wrong=`<span>✕</span>`;
$(“#password”).keyup(function () {
var password=$(“#password”).val()
console.log(password.length)
checkPassword(password)
})
function checkPassword(password) {
if(password.length < 8){
errorHandler(“#digit”,”#digit-li”,false)
}else{
errorHandler(“#digit”,”#digit-li”,true)
}
if(!password.match(/[A-Z]/)){
errorHandler(“#capital”,”#capital-li”,false)
}else{
errorHandler(“#capital”,”#capital-li”,true)
}
if(!password.match(/[a-z]/)){
errorHandler(“#small”,”#small-li”,false)
}else{
errorHandler(“#small”,”#small-li”,true)
}
if(!password.match(/[\d]/)){
errorHandler(“#number”,”#number-li”,false)
}else{
errorHandler(“#number”,”#number-li”,true)
}
if(!password.match(/[#?!@$%^&*-]/)){
errorHandler(“#special”,”#special-li”,false)
}else{
errorHandler(“#special”,”#special-li”,true)
}
}
function errorHandler(id,listId,status) {
if(status){
$(id).text(“”)
$(listId).removeClass(“text-danger”).addClass(“text-success”)
$(id).append(right)
}else{
$(id).text(‘’)
$(listId).removeClass(“text-danger”).addClass(“text-danger”)
$(id).append(wrong)
}
}
</script>
</html>
How to reach me?
Check My Website ravisharma.me
Connect with me on LinkedIn
Follow Me On Instagram
Shoot Me an Email