Password validation using JQueryHere 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.
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.![]()
This article is written by plus2net.com team.
![]() |
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |