Password validation using JQueryWe 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.
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
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 ValidationThe entered password string will be checked for following points.
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. .
Validating for lower case lettersOur 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.
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 scriptWe 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.