Password validation using JQuery bootstrap for minimum requirement

We often ask users to enter password with some minimum requirement. While entering the text in password field we can check and display help messages to guide user.

Here we will learn how to validate user entered text and display message asking user to use correct combination of text as password.

Note that validating at client side by using JavaScript or JQuery is not a foolproof method. So after submitting the data, server side validation is to be done to check the inputs. However client side validation helps user in understanding what is required before submitting the details to server side. This helps in better user experience.

We can display one password input box and by the side of it we will display a layer of help text (<span id="d1" class="tool_tip">). Inside this layer we will have four lines of text span with individual ID for control based on the input condition.

<input type=password name=my_text id=t1>

 <span id="d1" class="tool_tip">
<span id=d12>One Upper case letter</span><br>
<span id=d13>One Lower case letter</span><br>
<span id=d14>One Special char</span><br>
<span id=d15>One number</span><br>
<span id=d16>Length 8  char</span>

</span><br><div id=display_box class=msg></div>

We manage the display of this layer by using style declared inside head section of the page.

By default we kept this layer as hidden from the user (check the Style property of tool_tip class) and it only appears once user click or enters into the password box. At the same time we hide this box once it loses focus (user moves out of the password filed) . This is managed by JQuery

$('#t1').blur(function(){
$("#d1").fadeOut();
});
///////////
$('#t1').focus(function(){
$("#d1").show();
$('#d12,#d13,#d14,#d15,#d16').css("color", "black");
});

Every time user enters or delete any char inside the password field, we will check the total string for validation and display the matching text helping user to understand the requirement. For this we will use keyup event to trigger the checking of the string.

Requirements of Validation

The entered password string will be checked for following points.

User must enter at least one lower case letter
User must enter one upper case letter
User must enter one special character
User must enter one number
Total length must be minimum 8 character

We will keep one Flag which state we will change from T to F if any validation fails

We will use regular expression to check the string. We will prepare variable for this and then match with the string entered by the user. .

var upper_text= new RegExp('[A-Z]');
var lower_text= new RegExp('[a-z]');
var number_check=new RegExp('[0-9]');
var special_char= new RegExp('[!/\'^£$%&*()}{@#~?><>,|=_+¬-\]');

Validating for lower case letters

Our requirement is user must enter at least one lower case character. So we will check by using one if condition and if it returns true then we will apply CSS to change the background color to show that this condition is adhered.

if(str.match(lower_text)){
$('#d13').css("background-color", "green");
}else{$('#d13').css("background-color", "red");
flag='F';}

For failure of validation we are setting the Flag condition to false or F.

Same way you can verify the other conditions like presence of one upper case letter, one special character, one number and total length of the string should be minimum 8.

Once all the validations are cleared then our flag will have true value or T. Based on this we will decide to display the help text or not. Since password field chars are masked we are also displaying the user entered text in another div layer to show to the user. This need not be done in a practical script.

Demo of validation script

We have two demos in which basic script remains same. Second one is including bootstrap design. If you are not aware of bootstrap design then better to download or check default validation script. Using default validation script you can add your own design to it.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Password validation using JQuery

Requirements of Validation

Validating for lower case letters

Demo of validation script

Subscribe

1

2

3

4