Live DemoDownload Source Code

Getting Started

First we need to download a copy of the Progression.js plugin and include this within the website header. Progression uses a single JS file with a dependency on the jQuery library, along with its own custom CSS styles. Grab a copy from the official Github repo which also includes its own mini demo setup.

Inside the page body I have created a new form with the ID #registerform. This is the page element which we attach onto using the Progression function, along with a number of internal parameters. It’s interesting to note that the tooltips will appear along the full width of the form itself, not necessarily the length of the input fields. So you want to make sure everything is aligned properly with CSS on whatever side you have the tooltips appearing (left or right).

Each of the input fields has an extra HTML5 data attribute attached which includes a text string for the tooltip. This is labeled with data-helper and gets picked up automatically by the plugin. I’ve included a tabindex attribute on each field which also helps mobile users quickly moving from one field onto the next.

Although this form is somewhat basic, it clearly illustrates the patterns you may use to incorporate the plugin. I also included some of my own smaller jQuery logic checks which determine if the username is long enough, if the e-mail address is valid, and if both password fields match. These codes are not related to the plugin but can still be useful for developers building similar types of web forms.

Page Design with CSS

Another important piece of my code can be found in the styles.css stylesheet. I setup the default page resets along with the core wrapper, but remember how the form also needs to be at an exact width equal to the length of the input fields.

The #registerform element is locked at a full width of 512px along with the internal label/input fields being at a width of 160px + 340px (total of 500). The label and input fields leave some extra room for padding so that the tooltip isn’t right on top of anything. Also the .basetxt class is applied onto each input which uses CSS3 transitions to color the border and box shadow effect.

One other important piece to this relates to the error message p.errmsg. You can find these underneath three of the four fields which all pertain to jQuery validation checks. The messages are hidden by default using display: none and then displayed using jQuery’s .slideDown() method.

These last blocks of code define the submit button styles, along with some custom designs for the tooltip. You could just edit the main plugin CSS file but this makes it harder to upgrade in the future. Also it can be tough knowing exactly what you edited and reverting changes would be almost impossible. If you want to overwrite some of the plugin styles just pick through the progression.min.css and learn which classes you will need to target.

jQuery Progression & Validation

At the bottom of the index page before the closing tag I have opened up a new JavaScript section. This includes the Progression.js initialization plus some of my own validation checks. It is somewhat convoluted but I will break this down into smaller chunks.

We’re targeting the registration form we call .progression() with a number of internal parameters. I think most (if not all) of these parameters can speak for themselves and the plugin documentation can also explain a lot. showProgressBar is one that I turned off in this example as I feel it doesn’t work well using only 4 inputs. But it does provide a sense of user satisfaction when you require a large number of fields, as users can actually see themselves moving towards completion.

Also tooltipPosition and tooltipWidth may be worthwhile to customize and see how they fit best into your forms. The other settings like colors and font sizes are really easy to manipulate and fit into any design. Also notice that I’ve chained a .submit() event handler onto this form as well. So whenever the form is submitted we call .preventDefault() on the submit event to stop it from happening. This is because my form has no real action attribute, but for a live working form you should remove this chained event handler altogether.

Each of the final 3 validation blocks will check whenever the user blurs off an input field. This first piece of code runs after the user focuses and then blurs off the username field. If the username length is less than 6 characters we display the error message underneath. Otherwise if the username is 6 characters or more then we can hide the error message, assuming it is already displayed.

These last two validation checks rely on the same type of logic. First is the e-mail input field which uses a regex string to check for a valid e-mail address. I found this solution on a related Stack Overflow question which provides a simple yet effective e-mail syntax. This example should be more than enough to handle any common e-mail address.

Looking at the password validation you will notice this doesn’t occur until after the user blurs from the secondary password field. This is when the user must re-type their password and it will check against both values to make sure they are equal and not completely empty/blank. I have it checking to make sure the password is at least 1 character long but you could make the restrictions more harsh as necessary.

There are some jQuery plugins out there which actually help run these types of validation checks. But if you are comfortable with scripting it doesn’t hurt to merely write your own rules from scratch.

Live DemoDownload Source Code


jQuery developers have made a number of plugins to help with form advancement. Registration forms are often a tricky challenge, because they require a large amount of information. Applying these progression tooltips can really encourage users to push through and finish the signup process swiftly without much hesitation. As always my tutorial code is free to download and implement within your own web projects. Also if you have any questions or suggestions feel free to share with us in the discussion area below.

For more related resources: