Dylan's Blog

jQuery: Basic Form Validation

gotdelta — Mon, 02 Nov 2009 20:38:11 +0000

Form validation, whether it be checking for empty fields or malicious code, is very important. While validation should also be done server-side, having an immediate response to errors can be a great usability booster. Thanks to jQuery, checking for empty fields in a form and notifying the user of them is very simple.

This code will be run where the user submits the form:

$(function()
{
	$(".validate").submit(function()
	{
		validated = true;
		$(this).children("[type=text]").each(function()
		{
			$(this).removeClass("invalid");
			if ($(this).val() == "")
			{
				validated = false;
				$(this).addClass("invalid");
			}
		});
		
		if (!validated)
		{
			alert("Please fix the highlighted errors.")
		}
		return validated;
	});
}

Before we loop through the text inputs in forms with class validate, we create a validated variable to keep track of the validation status. Next, we loop through each of the text inputs contained in form. In case there were errors from a previous submit, we remove the class invalid. The invalid class (or whatever you want to name it) contains all the styling that will be added to inputs that are empty. This could be a different background color or pretty much anything else.
Next, we check to see if the text input is empty. If it is, we set the validated variable to false and add the invalid class. This is where you can run any additional code that you need for individual text inputs.
After looping through all the text inputs, we check the validated variable to see if there were any entry fields. If there were, an alert is opened up. This is where you can put any other more useful code that you need to run for invalid forms. Finally, we return validated. If it is true (the form was validated) the form will be submitted without a hitch, but if it is false (the form was not validated) the form will not submit.

This is a good start, but it would be even better if users could have immediate feedback of errors:

$(function()
{
	$(".validate input[type=text]").focus(function()
	{
		$(this).removeClass("invalid");
	}).blur(function()
	{
		if ($(this).val() == "")
			$(this).addClass("invalid");
	});
});

Similar to before, we loop through all of the text inputs in forms with the validate class. When the user click in the form the invalid class is removed, in case they are going back to fix an error. When they click out of the form, we check if the form is empty and if it is the invalid class is applied.

That’s all it takes for very basic form validation with jQuery!

jQuery: Default Text in Forms

gotdelta — Fri, 02 Oct 2009 21:55:27 +0000

To enhance the usability of your site, you’ll often want to give a form (a search box, for example) a default value. This is easily done thanks to the value HTML attribute. Once the user goes to use this form, however, you don’t want them to have to remove the default text. To get rid of it automatically, we can use a bit of very simple jQuery.

We’ll be creating two functions that can be used together to create a fully functioning version of this feature. First, we’ll create the listen_defaultText function, which will create the callback functions that run when the user click into and out of the form.

The first question we need to ask is how we can store the default value of the form. The answer is that we don’t! The DOM contains a defaultValue property that contains the default text from the HTML value attribute. With this in mind, let’s create our function. Here it is in its entirety:

function listen_defaultText(element)
{
	$(element).focus(function()
	{
		if ($(this).val() == $(this)[0].defaultValue)
		{
			$(this).val("");
			$(this).css("text-align", "left");
		}
	}).blur(function()
	{
		if ($(this).val() == "")
		{
			$(this).css("text-align", "center");
			$(this).val($(this)[0].defaultValue);
		}
	});
}

You can see that this function takes one argument – element – which will be the element or jQuery selector that you want the function to work on. The function adds a listener for the onfocus event, which will be run when the form is selected. Within the callback function for this event, you see if ($(this).val() == $(this)[0].defaultValue). The tricky part of this is the right side of the comparison. $(this) refers to the jQuery object for element the function is being run for. A jQuery object is essentially a collection of DOM objects, and because an element on the page will only have one DOM object, we can access it with $(this)[0]. With this DOM object, it is easy to get any value you need – in our case we want the default value, which we get with $(this)[0].defaultValue.

If, when the user selects the form, the current value is the same as the default value we want to get rid of the text. We do this with $(this).val("");. You can also apply any styling you need here – in this case the default text is center aligned but any input is aligned left.

Next, we take advantage of jQuery’s event chaining to do what we need to when the user deselects the form. }).blur(function() adds a listener for the onblur event that is called when the previous onfocus event is finished. In this callback function for this, we check if the form is empty. If it is, the user hasn’t entered any text and we need to reset the styling and put the default text back. This is just the opposite of what we did in the focus event callback.

At this point, it may be important to note the order in which things are done in each callback function. For the focus event, if we changed the style before changing the value, slower machines might draw the default text aligned to the left before it can be removed. For the blur event, if we reset the value before resetting the CSS, slower machines might display the default text on the left before it can be re-centered. Hardly a major issue, but worth nothing nonetheless.

This function is now working just as we want it. However, there is still one problem that is not readily apparent. If the user has entered text and then refreshes the page, the browser will remember the text. After the refresh, however, this text will have the default style – in our case it will be centered instead of to the left. Also, if the user has clicked in the form, removing the default text, and refreshes the page, the default text will not be there afterwards. Both of these issues are relatively easy to resolve with another function we can create:

function instantiate_defaultText(element)
{
	$(element).each(function()
	{
		if ($(this).val() != $(this)[0].defaultValue)
		{
			if ($(this).val() == "")
			{
				$(this).val($(this)[0].defaultValue);
			}
			else
			{
				$(this).css("text-align", "left");
			}
		}
	});
}

First, this function loops through all of the elements with $(element).each(function(). If the value of the form is not equal to the default value, another check is performed. If the form is empty – the second case I described – the form is reset back to it’s default value. We don’t need to worry about styling here because the default style of our forms is centered. Else, if the user has entered text that was carried over a refresh, we simply align it left.

To make use of these functions, we simply call them when the document is loaded:

$(function() {
	instantiate_defaultText(".defaultText");
	listen_defaultText(".defaultText");
});

The forms that need this functionality have the defaultText class, so that’s what we pass to each function.

And there you have it, user-friendly default text in forms.

Javascript: Capitalize Function

gotdelta — Fri, 02 Oct 2009 19:32:24 +0000

Here is a relatively simple javascript function to capitalize a word:

function capitalize(incomingString) {
	var letter = incomingString.substr(0,1);

	var str = incomingString.toLowerCase();

	return letter.toUpperCase() + str.substr(1);
}

Let’s go through this and see what exactly is going on. First, we see

function capitalize(incomingString) {

This is creating a new function called capitalize that takes one argument by the name of incomingString.

Next, we see

var letter = incomingString.substr(0,1);

This takes a substring of the argument passed into our function. A substring is simply a part of a string, in this case from the first character (0) to 1 more than than the character at 0, non-inclusive. This substring – which is the first character in the string – is then stored in a new variable called letter.

The next line is

var str = incomingString.toLowerCase();

This code is completely self-explanatory. It creates a new variable called str that contains an all-lowercase version of the input string.

The last part of the function is

return letter.toUpperCase() + str.substr(1);

This creates a concatenated string with an uppercase version of the first letter that we extracted earlier and a substring of the lowercase string from 1 to the end of the string. This capitalized string is then returned from the function.

This function is more complex than it needs to be, however. We can achieve the exact same functionality with this:

function capitalize(incomingString)
{
	return incomingString.charAt(0).toUpperCase() + incomingString.substring(1).toLowerCase();
}

This function is both shorter and more direct. We use charAt() (I think you can figure out what it does) to get the first character and substring() to get the rest of the string. substring() is an alternative to substr that in this case works in the same way.

Tabbed Horizontal Navigation with Unordered Lists

gotdelta — Tue, 29 Sep 2009 12:04:44 +0000

There are numerous possible ways to make a horizontal navigation bar for your website, but the cleanest and perhaps the most sensible way is with an unordered list. We’ll be making a simple tabbed navigation bar using only an unordered list and some CSS.

We’ll start with a simple list with links, contained within a div:


	
		One
		Two
		Three
		Forty Two Thousand

Which looks like this:

Now let’s add some CSS. First, we’ll reset all padding and margins:

* {
	margin: 0;
	padding: 0;
}

And then add some initial styling:

body {
	background-color: #CCC;
}

#navigation {
	height: 50px;
	
	background-color: #777;
	border-bottom: 1px solid #000;
}

Our page now looks like this:

Not quite what we’re looking for.

Next, we’ll start adding the CSS for the ul:

.navbar {
	margin-left: 10px;
	list-style: none;
}

list-style: none; removes the bullet points from the list. Although you couldn’t see them after the previous step, they were still there. The reset margins simply caused them to draw outside of the screen.

Now we’ll add the CSS that actually makes the list horizontal:

.navbar li {
	float: left;
	margin-left: 10px;
}

Yup, float: left; is all you need to make the list horizontal. margin-left: 10px; simply adds some much needed spacing.

Our navigation bar is finally starting to look like a navigation bar:

The bulk of the visual styling is done on the a tags:

.navbar li a {
	padding: 0 40px;
	
	background-color: #99CCFF;
	border: 1px solid #000;
	border-bottom: none;
}
.navbar li a:hover {
	background-color: #6699CC;
}
.navbar li a:active {
	background-color: #336699;
}

This is mostly self-explanatory. We added 40px of space to either side of the text in the a with padding: 0 40px;. We removed the bottom border for a good reason, as you’ll see in a few seconds. This is the current state of our navigation bar:

We’re almost there! Now we push the tabs down a bit by adding some padding to each li:

.navbar li {
	float: left;
	margin-left: 10px;
	padding-top: 20px;
}

Giving us this:

And finally, we add line-height: 29px; to #navigation:

#navigation {
	height: 50px;
	line-height: 29px;
	
	background-color: #777;
	border-bottom: 1px solid #000;
}

… and display: block; to .navbar li a:

.navbar li a {
	display: block;
	
	padding: 0 40px;
	
	background-color: #99CCFF;
	border: 1px solid #000;
	border-bottom: none;
}

… giving us a final result of:

At this point we can add some styling to the active class to show which tab is currently active. We’ll make the tab appear to be en extension of the page:

.navbar li a.active {
	background-color: #CCC;
	border-bottom: 1px solid #CCC;
}

At this point it should be easy to style the tabs as you need.

Parsing XML With jQuery

gotdelta — Thu, 24 Sep 2009 20:48:20 +0000

The XML file (bluetooth.xml) we’ll be working with looks something like this:

We’re going to parse through this file and return the value of an attribute for all of a certain tag.

To allow the user the input the tag and its attribute that they want, we’ll need a form:


Tag:

Attribute:

The form needs an id, and if you want to verify the input you should give ids to the two text inputs as well.

Thanks to jQuery, the Javascript for parsing the XML according to the input is surprisingly simple. Here it is in its entirety:

var doc = "bluetooth.xml";

$(function()
{
$("#search").submit(function()
{
if ($("#tagInput").val() != '' && $("#attrInput").val() != '')
{
$.get(doc, {}, function(xml)
{
var results = "";

$($("#tagInput").val(), xml).each(function()
{
results += $(this).attr($("#attrInput").val()) + "
";
});

$("#searchResults").html(results);
});
}

return false;
});
});

The first thing you’ll notice while reading this is that the $(); function is used a lot. It is shorthand for jQuery(); and has a wealth of functionality. The first time we use this function, a single anonymous function is passed as its parameter. This is shorthand for $(document).ready(function() {...} );. Whichever way you decide to write it, it will cause the function to be called when the DOM of the page is loaded. The first thing within this function is $("#search").submit(function(). This is saying to run the given function (which is known as an event handler, in this context) when the submit event is triggered for the element with id search. We’re aren’t going to parse any XML until the user submits the form, and when that happens this function will run.

The first thing we need to do when the user submits the form is check that they’ve actually filled it out. We can get the string that is currently in a text box with $("#textboxid").val(), and to check if it’s empty we simply test if it is equal to an empty string.

Next, the usefulness of jQuery is put on display when we retrieve the XML document: $.get(doc, {}, function(xml) {...} );. This seemingly simple piece of code is a complete AJAX request. $.get(); takes three parameters: the URL, data that will get sent to the server, and a callback function. We don’t need to send any data, so the second parameter is simply {}. The callback function is created as function(xml), which allows us to access the data the request returned through the object named xml.

Now that we have the XML document, we can finally do some parsing. The search results will be output to a div below the form. The html that will be generated while parsing will be stored in the results string until we can output it to the div.

The next line – $($("#tagInput").val(), xml).each(function() – searches for all of the given tag (the value of the tag input box) in the xml document and iterates through all of them, executing the anonymous function every time.

We get the attribute with $(this).attr($("#attrInput").val()). In this context, this refers to an xml tag that matched our search criteria. The .attr() method takes the name of an attribute (in this case what the user entered) and returns its value. It is appended to the results string with a .

After the results string is compiled, we put it in the div: $("#searchResults").html(results);

All that’s left is return false;. This makes it so that the page doesn’t refresh when the form is submitted.

All said and done, this is what it looks like: