How to extend jquery.validate url validation?

Question

I need users to be able to create partial URLs without having to enter the full URL each time.

For example, let's say I plan the URL is www.example.com/areas/{userinput}/home . I want the user to be able to enter some text in the text box, and I want to check that he is a valid URL.

The URL authentication function is as follows:

 url: function(value, element) { return this.optional(element) || /giantregex/.test(value); } 

I tried to add a validation method to the validator using the following:

 $.validator.addMethod("exturl", function(value) { return $.validator.methods.url.call($.validator, "http://www.example.com/areas/" + value + "/home"); }); 

However, when the form is validated and my extension is called, I keep getting this error:

 Uncaught TypeError: Object function (d,a){this.settings=b.extend(true,{},b.validator.defaults,d);this.currentForm=a;this.init()} has no method 'optional' 

optional looks like the method of the $.validator , but I cannot figure out how to call the validator url method.

Answer 1

JQuery Validation Plugin - v1.11.0

 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):\/\/(((([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([az]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([az]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([az]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([az]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([az]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([az]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(val); }); 

Then:

 $("#form1").validate({ rules: { complete_url:true } }); 

From http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

Answer 2

I managed to get it working without errors, here is the JS code I used:

 $(document).ready(function(){ function validateURL(value){ // URL validation from http://stackoverflow.com/questions/3809401/what-is-a-good-regular-expression-to-match-a-url var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[az]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi; var regex = new RegExp(expression); return value.match(regex); } $.validator.addMethod("urlvalidation", function(value, element) { return this.optional(element) || validateURL(value); }, "URL is not valid"); $('#frm_validation').validate({ rules : { urlvalidation : { urlvalidation : true } } }); });​ 

You can see it in action this JSFiddle .