jQuery Validate URL, adding “http://”

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:

1. If no url, don’t do anything
2. Check that the user had entered http:// in their URL, if not, add it in for them.
3. 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-\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]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\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

IE 7 indexOf() Replacement

Everyday I hate IE a little bit more, and by the same token, everyday I love jQuery that little bit more.

The reason for my hate/love feelings today was due to a bug caused by IE 7 not supporting the indexOf() method. I have no idea why IE doesn’t support this method, but it is annoying never-the-less. However, there is an easy fix if you are using jQuery – the inArray() function.

The inArray() function is pretty simple to use.

Instead of having:

haystack_array.indexOf("needle")

You should use:

jQuery.inArray("needle", haystack_array)

For those of you crazy nutters that aren’t using jQuery, there is a good post on this blog that will help you out.

Fixed – jQuery DatePicker not working in Thickbox

I’ve been struggling today for about an hour trying to get jQuery’s DatePicker working in Thickbox. There appeared to be some kind of conflict. I tried hacking up the Datepicker plugin file, changing the z-index of the CSS but nothing. The date picker wasn’t even being called.

Eventually I found that other people were having the same problem, and a comment by Kevin Luck (the author of DatePicker) flicked my brain into gear.

The problem was that I was initialising the datepicker on page load, not on the loading of the thickbox content.

For example, at the start of the page the Thickbox was going to be loaded in I had this:

<script type="text/javascript">
	$(function(){
		// initiate date picker
		$('.pick-date').datePicker();
	});
</script>
</head>

However, I found that if I removed that from the head, and instead inserted it in the Thickbox content, e.g:

<div id="MyThickboxContent">
<script type="text/javascript">
	$(function(){
		// initiate date picker
		$('.pick-date').datePicker();
	});
</script>

It worked fine, problem solved!

jQuery: Link override with search box

Just been working on a little something for a client involving Google Custom Search Engines.

The app we’re building uses 4 different search engines which are all specialised in a certain area. There is a central “Overview” page that gets the top results for the search from each of the search engines, plus there are normal links above the search box that, when clicked on should take the user directly to the Custom Search Engine results page for the string in the search box.

Sounds quite straightforward, but the links also save the current search (which may be different to the search box if the user has just entered a search into the box) so in this case, the old search needs to be stripped and the new search carried forward to the Custom Search Engine.

So it’s a little more tricky, but fortunately using jQuery and the URL Parser plugin by Mark Perkins I was able to cut out most of the tricky stuff.

Below is a little demo to illustrate the main part of the jQuery usage. Before you conduct a search, you should be able to click on the links to go and search Google for those keywords (jQuery, CakePHP, Ruby On Rails and No Search conducted). If you enter a string in the box and hit the “Search” button, you’ll go to Google and search for the string. However, if you enter a string in the search box but then click on a link, you’ll be taken to Google and search for the string.

This isn’t quite how it works on the client site, but is enough to show how the jQuery is being used.

• No Search
• jQuery
• CakePHP
• Ruby On Rail

Search Google

Javascript code in the <head> tags is:

<script src="/javascript/jquery.1.2.6.js" type="text/javascript"></script> 
<script src="/javascript/jquery.url.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(function(){
	$("#jQuerySearchExample a").click(function () {
		var path = "http://www.google.co.uk/";
		path += jQuery.url.setUrl($(this).attr("href")).attr("path");
		path += "?"+$("#jQuerySearchExampleInput").serialize();
		$(this).attr("href", path);
	});
});
// --></script>

And the HTML is as follows:

<ul id="jQuerySearchExample">
	<li><a href="http://www.google.co.uk/search" target="_blank">No Search</a></li>
	<li><a href="http://www.google.co.uk/search?q=jquery" target="_blank">jQuery</a></li>
	<li><a href="http://www.google.co.uk/search?q=CakePHP" target="_blank">CakePHP</a></li>
	<li><a href="http://www.google.co.uk/search?q=ruby+on+rails" target="_blank">Ruby On Rail</a></li>
</ul>
Search Google
<form action="http://www.google.com/search" method="get"> 
<input id="jQuerySearchExampleInput" name="q" type="text" /> 
<input type="submit" value="Search" />
</form>

As you can see, I use

jQuery.url.setUrl($(this).attr("href")).attr("path");

To strip out the current query string from the hard coded URL and then

"?"+$("#jQuerySearchExampleInput").serialize();

To replace it with the string within the search box.

Took a bit of faffing about, but works quite well