Frontend Validation for password

by Faisal Khan Janjua

HTML

<input type="password" />
<p></p>

CSS

input {
  outline: none;
  padding: 10px 14px;
  border: 1px solid #ccc;
  transition: all ease-in 0.2s;
}
input:focus {
  border: 1px solid #999;
}
input.error {
  border: 1px solid #F00;
}

JavaScript

alert('ready');
$(document).on('change', 'input[type="password"]', function(){
	$('p').text('');
});
$(document).on('blur', 'input[type="password"]', function(){
	var passVal = $(this).val();
  if( passVal.length < 8){
		$(this).addClass('error');
  }
  else {
		$(this).removeClass('error');
  }
  
  var regex1 = /[0-9]/g;
  var regex2 = /[a-z]/g;
  var regex3 = /[A-Z]/g;
  var regex4 = /[-!$%^&*()_+|~=`{}\[\]:\/\\\'\";<>?,.@#\s]/g;
  
  var check = true;
  if(!regex1.test(passVal)){
    check = false;
    $('p').append(' | No number Found');
  }
  if(!regex2.test(passVal)){
    check = false;
    $('p').append(' | No small letter Found');
  }
  if(!regex3.test(passVal)){
    check = false;
    $('p').append(' | No Capital letter Found');
  }
  if(!regex4.test(passVal)){
    check = false;
    $('p').append(' | No Special Character Found');
  }
  
  if(!check) {
    alert('Password must have Special characters, Uppercase letter, Lowercase letter and Digits');
  }
});