<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);
});
