In this post I'm going to show you how to create a progress indicator during the validation process of a web form. We're going to use CSS sprites on an element whose background-position property will be updated every time a field is filled up with the correct value. In our example we'll simply use a test to check if the passed value is not empty. First of all, we need to insert our progress indicator at the very top of our form, like so:
<form action="#" method="get" id="form">
<div id="progress"></div>
<!--...-->
</form>
We need a basic CSS sprite made up of three images combined together, where each image is a 48 x 48 pixels wide square. The overall dimensions of our sprite will be therefore 144 x 48 pixels. Here's our sprite:
We need to hide the background before the validation process, so we set our element as a 48 x 48 pixels square. To hide the image, we use a negative horizontal value of the background-position exactly equal to the width of the image sprite:
#progress {
width: 48px;
height: 48px;
margin: 0.5em 0 0.7em 0;
background-image: url(star-progress.png);
background-repeat: no-repeat;
background-position: -144px 0;
}
The validation process will take place when a field loses its focus, that is, by using the blur event. If the field's value is not empty, we change the background-position of our element to sequentially show the images of our sprite, so we'll have 0 0, -48px 0 and -96px 0, respectively.
The last field of our form must be treated separately, because we explicitly have to force the change of the background image when the field loses its focus. Since this field is the last field before the submit button, we have to handle it in a slight different way.
$(function() {
var messages = {
element: '<div class="error">',
message: 'Invalid value'
};
var positions = ['0 0', '-48px 0', '–96px 0'];
$('li', '#form').each(function() {
var $li = $(this);
$(messages.element).text(messages.message).
appendTo($li).hide();
});
$('li', '#form').each(function(index) {
var $input = $(this).find('input');
$input.blur(function() {
if($input.attr('id') == 'address') {
$('#progress').css('backgroundPosition', '-96px 0');
}
var value = $input.val();
if(value == '' || value == null) {
$input.next().fadeIn(1000);
} else {
$('#progress').css('backgroundPosition', positions[index]);
}
});
});
});
If the value is empty, we show an error message. As you can see, we've stored the background image positions in an array and accessed its value using the index passed with the each() method. You can see the demo below.