Password Strength Validation Using JQuery:
Password Strength Validation: if you set in password input field strength validation to give visitor more strong security. So follow this tutorial and use password strong verification on your web page. In that time many such sites often require password complication requirements to strengthen security settings. These requirements ensure that users have their passwords in strong so that it cannot be easily broken.
In this tutorial, I will build a basic password input field in a submit form. Before submitting password it will check if the password is strong or not. There are six options to create a password strong that are:
- Blank data cannot submit,
- enter at least 8 character password,
- at least one alphabet letter,
- at least one capital letter,
- one number,
- One special character.
This form will give users instant feedback about password strength and I think it will be evaluated each time the password strings enter a user’s character. I will show you to check password strength using jQuery.
You need to create a simple form page and define a password input field and a submit button, that’s like creating an index.html page in your local or web server. If you want to create a simple bootstrap form, you can create this and you need to connect jquery.min.js file must.
Set onsubmit event in your form starting tag and give onsubmit function name. now call the function name in the script tag and follow the example:
Full Code Here:
<!DOCTYPE html> <head> <title>Password strength Validation</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-6"> <h2 align="center" >Validation Form</h2> <p id="ErrorMsg" style="color:red"></p> <form class="form-horizontal" action="" onsubmit="return validateform();"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter Password" name="pwd"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </div> <script> function validateform(){ var pwd=$('#pwd').val(); if(pwd==""){ $('#ErrorMsg').text('Please enter your password!'); $('#pwd').css('color','red'); $('#pwd').focus(); return false; } if(pwd.length<8 || pwd.length> 16){ $('#ErrorMsg').text('Please enter at least 8 character!'); $('#pwd').css('color','red'); $('#pwd').focus(); return false; } if (!pwd.match(/[A-z]/) ) { $('#ErrorMsg').text('Please enter at least 1 alphabet letter'); $('#pwd').css('color','red'); $('#pwd').focus(); return false; } if (!pwd.match(/[A-Z]/) ) { $('#ErrorMsg').text('Please enter at least 1 capital letter!'); $('#pwd').css('color','red'); $('#pwd').focus(); return false; } if (!pwd.match(/([0-9])/) ) { $('#ErrorMsg').text('Please enter at least 1 number!'); $('#pwd').css('color','red'); $('#pwd').focus(); return false; } if (!pwd.match(/([!,%,&,@,#,$,^,*,?,_,~])/)){ $('#ErrorMsg').text('Please enter at least 1 special character!'); $('#pwd').css('color','red'); $('#pwd').focus(); return false; }else{ $('#pwd').css('color','green'); return false; } } </script> </body> </html>
You can set more different color in the text field and display message anywhere on your web page.
Click Here: To Get Code of Email Address Validation Using jQuery
Thanks for visiting our blog. Follow our blog site because we have more tutorial related different type of programming language. The DataInFlow is a platform, where you can get the text tutorial and video tutorial of a different kind of programming language like PHP, HTML, Javascript, Jquery, CSS3 and get some technology and latest news.