If you want to add password strength checker feature on your password field then in this post I am going to share simple jQuery plugin which help you to enable password strength check feature on your default password field so that your user get to know their password strength.
Libraries
Include jQuery and plugins libraries on page.
<script src="https://code.jquery.com/jquery-1.12.0.min.js">script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">script> <script src="jquery.strengthify.min.js">script> <link rel="stylesheet" href="strengthify.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> |
HTML
Create simple password field where we need to apply password strength check.
JS
Now call the plugin function on page and done!
$(function() { $('.password-field').strengthify({ zxcvbn: 'https://cdn.rawgit.com/dropbox/zxcvbn/master/dist/zxcvbn.js', drawTitles: true, drawMessage: true }); }); |
See live demo and download source code.
This awesome plugin is developed by MorrisJobke. Visit their official github repository for more information and follow for future updates.