jQuery validate: How to add a rule for regular expression validation?
Thanks to the answer of redsquare I added a method like this:
$.validator.addMethod( "regex", function(value, element, regexp) { var re = new RegExp(regexp); return this.optional(element) || re.test(value); }, "Please check your input.");Now all you need to do to validate against any regex is this:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })Additionally, it looks like there is a file called additional-methods.js that contains the method "pattern", which can be a RegExp when created using the method without quotes.
Edit
The pattern function is now the preferred way to do this, making the example:
$("#Textbox").rules("add", { pattern: "^[a-zA-Z'.\\s]{1,40}$" })
You can use the addMethod()
e.g
$.validator.addMethod('postalCode', function (value) { return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value); }, 'Please enter a valid US or Canadian postal code.');good article here https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/
I had some trouble putting together all the pieces for doing a jQuery regular expression validator, but I got it to work... Here is a complete working example. It uses the 'Validation' plugin which can be found in jQuery Validation Plugin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://YOURJQUERYPATH/js/jquery.js" type="text/javascript"></script> <script src="http://YOURJQUERYPATH/js/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $().ready(function() { $.validator.addMethod("EMAIL", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value); }, "Email Address is invalid: Please enter a valid email address."); $.validator.addMethod("PASSWORD",function(value,element){ return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/i.test(value); },"Passwords are 8-16 characters with uppercase letters, lowercase letters and at least one number."); $.validator.addMethod("SUBMIT",function(value,element){ return this.optional(element) || /[^ ]/i.test(value); },"You did not click the submit button."); // Validate signup form on keyup and submit $("#LOGIN").validate({ rules: { EMAIL: "required EMAIL", PASSWORD: "required PASSWORD", SUBMIT: "required SUBMIT", }, }); }); </script></head><body> <div id="LOGIN_FORM" class="form"> <form id="LOGIN" name="LOGIN" method="post" action="/index/secure/authentication?action=login"> <h1>Log In</h1> <div id="LOGIN_EMAIL"> <label for="EMAIL">Email Address</label> <input id="EMAIL" name="EMAIL" type="text" value="" tabindex="1" /> </div> <div id="LOGIN_PASSWORD"> <label for="PASSWORD">Password</label> <input id="PASSWORD" name="PASSWORD" type="password" value="" tabindex="2" /> </div> <div id="LOGIN_SUBMIT"> <input id="SUBMIT" name="SUBMIT" type="submit" value="Submit" tabindex="3" /> </div> </form> </div></body></html>