A project we have going on here at ibrow towers involves quite a bit of jQuery Validation. Whilst the Validation plugin is great with the default functions it offers, what makes it truly excellent is the fact that it is easily extendable.
For example, one thing that has been bugging me is to validate a URL the user must type in the initial http://. But why? Can the validation not just assume that if, for example, www.robsearles.com is typed in, that the user actually meant http://www.robsearles.com?
Well, after a quick read of the documentation and a hack around this little irritant is now gone. It’s all down to addMethod() which lets you add a custom validation method. Lets create one called complete_url().
jQuery.validator.addMethod("complete_url", function(val, elem) { // will contain our validation code }, 'You must enter a valid URL'); |
A quick word about return values. If the method returns true, everything is considered OK. However, if false is returned then validation is assumed to have failed.
Our new method needs to do three things:
- If no url, don’t do anything
- Check that the user had entered http:// in their URL, if not, add it in for them.
- Check that the URL is now valid. For this I just used the source for the original url validation method.
Lets translate this into some code:
jQuery.validator.addMethod("complete_url", function(val, elem) { // if no url, don't do anything if (val.length == 0) { return true; } // if user has not entered http:// https:// or ftp:// assume they mean http:// if(!/^(https?|ftp):///i.test(val)) { val = 'http://'+val; // set both the value $(elem).val(val); // also update the form element } // now check if valid url // http://docs.jquery.com/Plugins/Validation/Methods/url // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/ return /^(https?|ftp)://(((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:)*@)?(((d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]))|((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?)(:d*)?)(/((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*)?)?(?((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|[uE000-uF8FF]|/|?)*)?(#((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|/|?)*)?$/i.test(val); }); |
Validating the form with this new method is very straight forward:
$("#form1").validate({ rules: { url: "complete_url" } }); |
Feel free to use/copy/modify as you see fit. If you do use it, why not let me know, or drop me a trackback?
Have fun
Other jQuery Specific Posts
- IE 7 indexOf() Replacement
- Fixed – jQuery DatePicker not working in Thickbox
- jQuery: Link override with search box