real time password validator

Real-Time Password Validator Registration Form Demo

Real time password validator/form validation - Introduction

First of all, what is a real time password validator/form validation? Well, a form validation is a process by which users are notified about the erroneous data/inputs that they entered in the form. There are basically two types of form validation,

  • The first being the instant validation or the real time password validator/form validation where the user enters the data and at the same time, the user is been notified of any mistake/error which has been committed by the user if any.
  • The second kind being the validation on page submit where the user enters a chunk of information in all the fields and after clicking the submit button the form is validated and the user is made aware of the mistakes he/she made if any.

Current Scenerio

However, in recent times the real time validation turned out to be a game changer since it annoys the user less by informing the user of the mistake at the time user enters any value and of course saves a lot of time. For instance, in olden days when websites used form validations on page submit/reload, users had to fill all the information for all the required fields and then had to wait for the page to load display a success/error message. This often was a pain in the neck since on any error, users had to fill all the information again and none of them could not be stored due to its sensitivity and security purpose.

So, today we would discuss how to build a demo registration form whose sole aim is real time password validator and other form validation without loading the page.

Please note: Some validations might need the user to click on submit, however, the page will not reload. The same can also be handled in real time too. This is just for the demostration purpose.

In the below registration form we will have fields like username,  email, password, and confirm the password. That being said, let's have a look at the codes.

The HTML code:

<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3 boxStyle"
				style="padding-right: 0px !important; padding-left: 0px !important;">
				<div class="panel-body"
					style="padding-right: 4px !important; padding-left: 4px !important;">
					<form method="post" name="challenge" class="form-horizontal"
						role="form" action="#" onSubmit="return submitForm()"
						AUTOCOMPLETE="off">
						<fieldset
							style="min-width: 0; padding: .35em .625em .75em !important; margin: 0 2px; border: 2px solid silver !important; margin-bottom: 10em;">
							<legend
								style="border-bottom: none; width: inherit; ! important; padding: inherit;">Registration
								Form</legend>

							<div class="form-group">
								<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12"
									style="text-align: right !important;">
									<span style="color: red">*</span> <span style="font-size: 8pt;">mandatory
										fields</span>
								</div>
							</div>
							<div class="form-group" style="margin-bottom: 0px;">
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message10" style="font-size: 10pt; padding-left: 0px;"></div>

							</div>
							<div class="form-group">
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
								<div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 mobileLabel"
									style="padding-top: 7px; text-align: right;">
									Username&nbsp;<span style="color: red">*</span>&nbsp;:
								</div>

								<div
									class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group mobilePad"
									style="font-weight: 600;">

									<input style="border-radius: 4px !important;" type="text"
										class="form-control" name="username" id="username">

								</div>
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
							</div>
							<div class="form-group">
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
								<div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 mobileLabel"
									style="padding-top: 7px; text-align: right;">
									Your Email&nbsp;<span style="color: red">*</span>&nbsp;:
								</div>

								<div
									class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group mobilePad"
									style="font-weight: 600;">

									<input style="border-radius: 4px !important;" type="email"
										class="form-control" name="yourEmail" id="yourEmail">

								</div>
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
							</div>

							<div class="form-group">
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									data-toggle="collapse" data-target="#passPolicy"
									style="font-weight: bold; font-size: 10pt; padding-left: 0px; color: black; cursor: pointer; text-decoration: underline;">
									Check Password Policy<span class="caret"></span>
								</div>
							</div>
							<div class="form-group" style="margin-bottom: 0px;">
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div id="passPolicy"
									class="col-sm-8 col-md-8 col-lg-7 col-xs-10 collapse mobilePad"
									style="padding-right: 17px;">
									<ul type="disc" style="padding-left: 0px;">
										<li>Your Password must have minimum 6 characters.</li>
										<li>Your Password must contain at least one number, one
											uppercase, lowercase & special character.</li>
										<li>Your Password must not contain your Username.</li>
										<li>Your Password must not contain Character or Number
											repetition.</li>

									</ul>
								</div>
							</div>
							<div class="form-group " style="margin-bottom: 5px;">
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
								<div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 mobileLabel"
									style="padding-top: 7px; text-align: right;">
									Your Password&nbsp;<span style="color: red">*</span>&nbsp;:
								</div>

								<div
									class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group mobilePad">

									<input type="password" onkeyup="passwordChecker()"
										name="password" id="password" class="form-control"><span
										class="input-group-btn"><button
											class="btn btn-defaultCUST" id="view_button3"
											style="height: 34px; padding-left: 7px;" type="button">
											<span class="glyphicon glyphicon-eye-open"></span>
										</button></span>

								</div>
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>

							</div>
							<div class="form-group" style="margin-bottom: 5px;">
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message8" style="font-size: 10pt; padding-left: 0px;"></div>

								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message" style="font-size: 10pt;"></div>
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message2" style="font-size: 10pt;"></div>
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message3" style="font-size: 10pt;"></div>
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message4" style="font-size: 10pt;"></div>
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message5" style="font-size: 10pt;"></div>
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message6" style="font-size: 10pt; padding-left: 0px;"></div>
								<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
								<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad"
									id="message7" style="font-size: 10pt; padding-left: 0px;"></div>

							</div>
							<div class="form-group">
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
								<div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 mobileLabel"
									style="padding-top: 7px; text-align: right;">
									Confirm Your Password&nbsp;<span style="color: red">*</span>&nbsp;:
								</div>

								<div
									class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group mobilePad">

									<input type="password" name="verifypassword"
										id="verifypassword" class="form-control"><span
										class="input-group-btn"><button
											class="btn btn-defaultCUST" id="view_button4"
											style="height: 34px; padding-left: 7px;" type="button">
											<span class="glyphicon glyphicon-eye-open"></span>
										</button></span>

								</div>
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
							</div>
							<div class="form-group">
								<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12"
									id="message1"
									style="font-weight: bold; text-align: center; font-size: 10pt;">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
								<div class="col-sm-11 col-md-11 col-lg-11 col-xs-10"
									style="text-align: center;">
									<button id="valuser" type="button" onclick="submitForm()"
										class="btn btn-success">Submit</button>
								</div>

								<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>

		</div>
	</div>

The Jquery Code:

<script>
$(document).ready(function() {
 $("#view_button3").bind("mousedown touchstart", function() {
        $("#password").attr("type", "text");
    }), $("#view_button3").bind("mouseup touchend", function() {
        $("#password").attr("type", "password");
    }), $("#view_button4").bind("mousedown touchstart", function() {
        $("#verifypassword").attr("type", "text");
    }), $("#view_button4").bind("mouseup touchend", function() {
        $("#verifypassword").attr("type", "password")
    })
});
function passwordChecker(){
									 $('#verifypassword').val('');
									 $('#message1').html(''); $('#message8').html(''); $('#message10').html('');
									 $('#message').html('');$('#message2').html('');$('#message3').html('');$('#message4').html('');$('#message5').html('');$('#message6').html('');$('#message7').html('');
									 if($('#password').val().length>=4){
									 if(newValPassPoilcy()===true ){
										 $('#message').css('color','green');
										 $('#message').html('Although looks like a good password, try to make it more stronger');
									 if($('#password').val().length>=9){
										 $('#message').html('');
										 $('#message1').html('');
									 } 
										return true;
									}
									 }
									  
									 
								}
	function NumAndWordRep(){
									 var password = $('#password').val().toLowerCase();
									if(password.match(/(.)\1\1/)){
									//	alert("Your Password cannot contain Character or Number repetition");
									$('#message7').css('color','red');
										 $('#message7').html('Your Password cannot contain Character or Number repetition.');
										return false;
									}
									return true;
	}
function userNameAsPass(){
								 var password = $('#password').val().toLowerCase();
									var uname=$('#username').val().toLowerCase();
								
									var uname1 = new RegExp(uname);
									if(null!==uname &&''!==uname){
									if( uname1.test(password)){
									    
										$('#message6').css('color','red');
										 $('#message6').html('Your Password cannot contain your Username.');
										return false;
									}}
									else{
										 $('#message6').html('');
										$('#message10').css('color','red');
										$('#message10').css('font-weight','bold');
										 $('#message10').html('Please enter your username first !!');
										 return false;
									}
									return true;
								
								}
		function  newValPassPoilcy(){
								
									  var password = $('#password').val();
							if(!password.match(/^(?=.{6,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[[email protected]#$%^&_+=\\*\\-\\(\\)\\{\\}\\:\\;\\<\\>\\|\\,\\.\\?\\/\\'\\"]).*$/) || userNameAsPass()===false || NumAndWordRep()===false){
										
										 $('#message8').css('color','red');
										  $('#message8').html('Your password must contain:-');
									  if(!password.match(/^(?=.{6,}).*$/)){
										  $('#message').css('color','red');
										  $('#message').html(' - minimum 6 characters.');
										 
									  }
									   if(!password.match(/^(?=.*[0-9]).*$/)){
										  $('#message2').css('color','red');
										  $('#message2').html(' - at least 1 Number.');
										  
									  }
									   if(!password.match(/^(?=.*[a-z]).*$/))
									  {
										  $('#message3').css('color','red');
										  $('#message3').html(' - at least 1 Lowercase character.');
									  
									  }
									   if(!password.match(/^(?=.*[A-Z]).*$/)){
										  $('#message4').css('color','red');
										  $('#message4').html(' - at least 1 Uppercase character.');
										  
									  }
									   if(!password.match(/^(?=.*[[email protected]#$%^&_+=\\*\\-\\(\\)\\{\\}\\:\\;\\<\\>\\|\\,\\.\\?\\/\\'\\"]).*$/)){
										 
										  $('#message5').css('color','red');
										  $('#message5').html('	- at least 1 Special character.');
										 
									  }
									   if(userNameAsPass()===false){
										   if(password.match(/^(?=.{6,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[[email protected]#$%^&_+=\\*\\-\\(\\)\\{\\}\\:\\;\\<\\>\\|\\,\\.\\?\\/\\'\\"]).*$/)){
											   $('#message8').html('');  
										   }
										
									  }
									   if(NumAndWordRep()===false){
										   if(password.match(/^(?=.{6,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[[email protected]#$%^&_+=\\*\\-\\(\\)\\{\\}\\:\\;\\<\\>\\|\\,\\.\\?\\/\\'\\"]).*$/)){
											   $('#message8').html('');  
										   }
										  
									  } 
									  return false;
					    } 
									  else{
										 
										return true;
									  }
									 
								  }	
	function submitForm(){
	  
	     if(document.getElementById("username").value.trim()==="" && document.getElementById("username").value!==null){
	      $('#message1').css('color','red');
			 $('#message1').html('Please enter your username');   
	     }
	     else if(document.getElementById("yourEmail").value.trim()==="" && document.getElementById("yourEmail").value!==null){
	      $('#message1').css('color','red');
			 $('#message1').html('Please enter your Email ID');   
	     }
	     else if(checkEmail()===false){
	          $('#message1').css('color','red');
			 $('#message1').html('Enter a valid Email address'); 

	     }
	      else if(document.getElementById("password").value.trim()==="" && document.getElementById("password").value!==null){
	      $('#message1').css('color','red');
			 $('#message1').html('Please enter your Password');   
	     }
	      else if(document.getElementById("verifypassword").value.trim()==="" && document.getElementById("verifypassword").value!==null){
	      $('#message1').css('color','red');
			 $('#message1').html('Please confirm your password');   
	     }
	     
	  else{
	      var password=$('#password').val();
	      var confirm=$('#verifypassword').val();
	      if(password==confirm){
	          $('#message1').css('color','green');
	          $('#message1').html('Success! You have reached the end of this demo application');   
	            
	      }
	      else{
	          $('#message1').css('color','red');
			 $('#message1').html('Confirm password and password must be same');   
			 return false;
	     
	      }
	      return true;
	  }
	   
	}	
	function checkEmail(){
	   var email=$('#yourEmail').val();
	  if((email.indexOf(".") > 2) && (email.indexOf("@") > 0)){
	     return true; 
	  }
	  else{
	     return false;		 
	  }
	    
	}
</script>

The CSS code:

@media only screen and (max-device-width:540px) {
    	   .mobileLabel{
   text-align: left;
   }
   	 .mobilePad{
   margin-left: 4em;
   }
}
@media only screen and (max-device-width:750px) and
	(orientation:landscape) {
.mobileLabel{
   text-align: left;
   }
    .mobilePad{
   margin-left: 11%;
   }
	}
		.boxStyle{
margin-left: 20%;width: 60%;
}



The Output:

In case you do not like the video or want more detailed information, please follow below.

Brief description:

To make it easier to understand I have divided this explanation into 4 cases.

User Enters no inputs and simply clicks on the Submit button:

In this case, the user is display message and asked to enter the Username, followed by a valid email, a password and also confirm the password. When the user clicks on submit button the submitForm() function is invoked which check whether the username, email, password and confirm password fields are empty or not. On typing the password, on key press, the passwordChecker() is invoked which instead invokes newValPassPolicy() function. This function is responsible for checking the password against the said password policy. For which it invokes NumAndWordRep() function to check any number or letter repetition in the password and userNameAsPass() function to check if the password contains the username.

Finally, if the password satisfies all the password policies then the user is shown a message that "Although looks like a good password, try to make it more stronger" to encourage the user to create a stronger password. This message eventually vanishes when the user sets a password to a minimum length of 9 characters. At last, the user is shown a success message.

The regex for the strong password policy is implemented with jquery. The password fields also contains a show/hide password button to let the user check the password and confirm password before clicking on submit button.

Check the password policy before setting the password:

The user should check the password policy before entering the password. It can be checked by clicking on the "Check password policy" drop-down.

Go for the password field first:

If in case the user opts to enter and set the password first and then username, the user will be displayed a message to set the username first since we will have to check whether the username is a part of the entered password, which is by the way not allowed by our policy.

Validating the entered password against the policy:

When the user enters the password followed by username and email the entered password is checked against 7 logics viz,

  • The password should contain 6 characters.
  • The password should not contain Username.
  • The password should not contain a number or word repetition.
  • The password should contain at least 1 number.
  • The password should contain at least one lower case character.
  • The password should contain at least one upper case character.
  • The password should contain at least one special character.

In the end, the user sees a success message if everything turns out right.

You can also view a working example of the demo application explained above on Bootsnipp.

That's it, I hope you learned something. If you did please share and comment below and don't forget to check our other articles.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.