How To Validate Passwords Using jQuery
erics, Posted October 19th, 2011 at 5:06:02pm
The ability to validate BEFORE a form is submitted greatly reduces end-user frustration by telling the user immediately what the issue is.
The jQuery Validation plugin does just that.
Here is a link to the plugin’s home page: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
This is a simple recipe for doing custom password validation:
In the html head
|
1 2 3 |
<script src="/js/jquery-1.6.2.min.js"></script> <script src="/js/jquery.validate.min.js"></script> <script src="/js/validate.js"></script> |
In the html body
|
1 2 3 4 |
<form id="yourForm"> Password: <input id="password-id" name="password" type="password" maxlength="14" title="Please provide your password. It must be between 6 and 14 characters long. At least one number and one capital letter are also required." /> Password, again: <input id="password2-id" name="password2" type="password" maxlength="14" title="Please re-enter your password for confirmation."/> </form> |
validate.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
jQuery(document).ready(function() { jQuery.validator.addMethod( 'ContainsAtLeastOneDigit', function (value) { return /[0-9]/.test(value); }, 'Your password must contain at least one digit.' ); jQuery.validator.addMethod( 'ContainsAtLeastOneCapitalLetter', function (value) { return /[A-Z]/.test(value); }, 'Your password must contain at least one capital letter.' ); var Validator = jQuery('#yourForm').validate({ rules: { 'password': { // this is from the name="password" attribute, not id="password-id" attribute required: true, rangelength: [6, 14], ContainsAtLeastOneDigit: true, ContainsAtLeastOneCapitalLetter: true }, 'password2': { // this is from the name="password2" attribute, not id="password2-id" attribute required: true, equalTo: '#password2-id' } } }); }); |
Categories: How-To's, Technology addMethod, howto, input, javascript, JQuery, jQuery.validate, jQuery.validator, JS, Password, Rule, Rules, tips, Valid, Validate, Validation
3 Reader Comments
Frank said on October 23, 2012, 10:56 pm:
Thanks. You ‘da man!!!!