"Password Validation"
Bootstrap 4.1.1 Snippet by dinojandino

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="updatedVerify"> <div class="container"> <h1>Password Validation</h1> <div class="inputBoxLeft"> <form target="hiddenFrame"> <ul> <li> <label for="password"></label> <span><input type="password" id="password" name="password" placeholder="password" required></span> </li> <li> <span><input type="password" id="password-verify" name="password-verify" placeholder="Verify Password" /></span> <button class="pswd_show">Show</button> <p class="incorrectMsg">passwords do not match!</p> </li> <li> <input class="passwordButton" type="submit" value="submit"> </li> </ul> </form> </div> </div> <div class="pswd_info"> <h4 class="pswd_reqs">Password must meet the following requirements:</h4> <ul> <li id='letter' class='invalid'>Contains <strong>a lowercase letter</strong></li> <li id='capital' class='invalid'>Contains <strong>a capital letter</strong></li> <li id='number' class='invalid'>Contains <strong>a number</strong></li> <li id='special' class='invalid'>Contains <strong>a special character</strong></li> <li id='length' class='invalid'>Contains <strong>8 characters</strong></li> </ul> </div> </section> <iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
* { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style-type: none; } .updatedVerify { margin: 50px auto; text-align: center; position: relative; } .container { width: 400px; padding: 0px; background: #fefefe; margin: 0 auto; border: 1px solid #c4cddb; border-top-color: #d3dbde; border-bottom-color: #bfc9dc; box-shadow: 0 1px 1px #ccc; border-radius: 5px; position: relative; transition: all 0.5s ease-in; } .updatedVerify h1 { margin: 0; padding: 10px 0; font-size: 24px; text-align: center; background: #eff4f7; border-bottom: 1px solid #dde0e7; box-shadow: 0 -1px 0 #fff inset; border-radius: 5px 5px 0 0; /* otherwise we get some uncut corners with container div */ text-shadow: 1px 1px 0 #fff; } form ul li { margin: 10px 30px; } form ul li:last-child { margin: 20px 0 25px 0; } input { padding: 10px 10px; border: 1px solid #d5d9da; border-radius: 5px; box-shadow: 0 0 5px #e8e9eb inset; width: 328px; font-size: 1em; outline: 0; /* remove webkit focus styles */ } input:focus { border: 1px solid #b9d4e9; border-top-color: #b6d5ea; border-bottom: 4px solid pink; box-shadow: 0 0 5px #b9d4e9; } .container span { background: #f6f6f6; padding: 3px 5px; display: block; border-radius: 5px; margin-top: 5px; } /*==========================show password style============================*/ .showPswd { background: transparent; } /*==========================requirements style============================*/ .invalid { color: #848482; transition: all .1s ease-in; } .invalid:before { content: ""; padding-right: 15px; } .invalidPass { background: rgba(192, 57, 43, 0.85); } .valid { color: #3CBC3C; transition: all .2s ease-in; animation-name: grow; animation-duration: .2s; animation-iteration-count: 1; animation-timing-function: ease-in; } .valid strong{ text-shadow: 0px 5px 5px rgba(0,0,0,0.1), 5px 10px 5px rgba(0,0,0,0.05), -5px 10px 5px rgba(0,0,0,0.05); } .valid::before { content: "\2713 "; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; left: -5px; position: relative; font-weight: 800; animation-name: grow; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in; -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out; -moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out; -ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out; -o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out; transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); -webkit-backface-visibility: hidden; } .pswd_info ul { margin: 0 auto; width: 250px; } .pswd_info li { padding: 5px; text-align: left; -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-backface-visibility: visible; transition: all .2s ease-in; } /*==========================requirements logic============================*/ .pswd_info { display: none; padding: 10px 5px; margin-top: 5px; text-align: left; font-family: helvetica, arial, sans-serif; position: relative; text-align: center; margin: 1em auto; width: 400px; /*transition: all .2s ease-in;*/ } .incorrectMsg { display: none; } .shake { animation: shake 0.8s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } @keyframes grow { 50% { transform: scale(1.1); } }
var password = []; var password2 = []; $(document).ready(function() { password = $('#password'); password2 = $('#password-verify'); var ruleValidator = function() { var pswd = $(this).val(); //gets what is being input in the field and sets as variable if(pswd.length < 8) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); console.log('length '+ pswd.length); } // letter if(pswd.match(/[a-z]/) ) { $('#letter').removeClass('invalid').addClass('valid'); } else { $('#letter').removeClass('valid').addClass('invalid'); } // Capital if(pswd.match(/[A-Z]/)) { $('#capital').removeClass('invalid').addClass('valid'); } else { $('#capital').removeClass('valid').addClass('invalid'); } // number if ( pswd.match(/\d/) ) { $('#number').removeClass('invalid').addClass('valid'); } else { $('#number').removeClass('valid').addClass('invalid'); } // character if ( pswd.match(/[$&+,:;=?@#|'<>.^*()%!-]/) ) { $('#special').removeClass('invalid').addClass('valid'); console.log('log: '+ pswd); } else { $('#special').removeClass('valid').addClass('invalid'); } } password.focus(function() { // (triggers whenever the password field is selected by the user) $('.pswd_info').fadeIn('low'); }); password.blur(function() { // (triggers whenever the password field is unselected) $('.pswd_info').fadeOut('low'); }); $('.passwordButton').on('click', function(e) { e.preventDefault(); if(password.val() !== password2.val()) { $('.incorrectMsg').show(); password2.addClass('shake').addClass('invalidPass'); password2.blur(function() { // (triggers whenever the password field is unselected) password2.trigger('reset'); $('.incorrectMsg').hide(); password2.removeClass('shake').removeClass('invalidPass'); }); } else { $('.incorrectMsg').hide(); } }); $('.pswd_show').click(function (){ console.log('click'); password2.toggleClass('showPswd'); if (password2.hasClass('showPswd')) { password2.attr('type', 'text'); console.log("text"); $('.pswd_show').html('Hide Password'); } else{ console.log("pswd"); password2.attr('type', 'password'); $('.pswd_show').html('Show Password'); } }); password.keyup(ruleValidator); });

Related: See More


Questions / Comments: