<div>
<h3>Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:</h3>
<input type="text" name="" placeholder="Enter your password">
<span class="message success">Valid Password!</span>
<span class="message error">Invalid Password!</span>
</div>
html, body {
height: 100%;
min-height: 100%;
}
body {
display: flex;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
div {
width: 50%;
}
input {
font-size: 30px;
width: 100%;
padding: 15px;
text-align: center;
border: 5px solid rgba(0, 0, 0, .3);
}
.message {
font: 20px Helvetica, Arial, Sans-serif;
display: none;
width: 100%;
padding: 20px;
color: #fff;
}
.error {
background: red;
}
.success {
background: green;
}
$(function(){
var regExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
$('[type="text"]').on('keyup', function() {
$('.message').hide();
regExp.test( $(this).val() ) ? $('.message.success').show() : $('.message.error').show();
});
});
This Pen doesn't use any external CSS resources.