BabySteps – jQuery Step-by-Step Forms

Cory O'Daniel — Fri, 22 Aug 2008 22:57:31 +0000

Just finished up my first jQuery plugin 'BabySteps' (yes, its Bill Murray reference). BabySteps helps in breaking up long or complicated web forms into smaller steps without multiple page requests. In the past when doing a multi-step form I'd generally have two or three pages that a user would have to go through, or I'd chalk up a bunch of javascript to shuffle divs around.

BabySteps takes the thinking out of breaking up forms. Simply break your steps up into divs (or your container of choice) and hide them.

And thats it. When your page loads 'step 1' will show. At the bottom a 'next' button will be appended. Click the next button and 'step 2' appears with a 'next' and 'previous' button.

Ok maybe you are thinking, well that's great, but I'd really like to customize what my form transitions look like.

Ok, cool. I can deal with that. BabySteps has a number of configurable parameters (globally or individually configurable):

nextBtn - path to your next button
prevBtn - path to your previous button
bindPrev - Do you want a previous button on the next page?
transition - how you want to transition from one step to the next
layoutButton - how you want to lay your button out over/in your step
generateMarkup - the markup you want to use to create your button
nextValidator - callback that runs a validator on next buttons 'onclick' should return boolean

//These are each globally or individually configurable... :)
$.fn.bindStep.default.nextBtn = '/images/path/to/my/next.gif';
$.fn.bindStep.default.prevBtn = '/images/path/to/my/prev.gif';
 
var step1 = $('#step1');
var step2 = $('#step2');
 
//Dont like the default hide/show?
step1.bindStep(step2,{
  transition: function(currStep,nextStep){
    currStep.slideUp();
    nextStep.slideDown();
  }
});
 
//Dont like the  wrapped in ?
$.fn.bindStep.defaults.generateMarkup = function(id1,id2,img){
  //id1 is the id the events are bound to (default DIV)
  //id2 is an extra id for the inner element (default img), if you dont have an inner, just ignore it
  return(
  [
    ',
      'src="' + img + '" ',
      'id="' + id1 + '" ',
    '/>'
  ].join('');
  );
}

Woot, pretty much everything is a callback, so you can modify the way the buttons are laid out, how their markup is generated and even how they transition. Of course there are also defaults, so now, it's up to you whether or not you want to just do the bare minimum. Well, like Brian, for example, has 37 cool transitions.

Here is a SIMPLE example of using the nextValidator.

$(function(){
  //get references to my 4 steps
  var s1 = $('#step1');
  var s2 = $('#step2');
  var s3 = $('#step3');
  var s4 = $('#step4');
 
  s1.bindStep(s2,{
    nextValidator: step1_validator
  });
 
  s2.bindStep(s3);
  s3.bindStep(s4);
});
 
/* The nextValidator doesn't care what goes on
 * inside the validation method/closure as long
 * as it returns true|false.  If it gets true, the
 * next button works, if it gets false, it doesn't
 * All error reporting/validation is up to you or
 * your validation plugin.
 *
 * Simple example of validation that a username,
 * password, and password confirmation are entered
 * before moving on to the rest of the sign up form.
 *
**/
function step1_validator(){
  if(!$('#username').val()) return false;
  if(!$('#password').val()) return false;
  if(!$('#password_confirm').val()) return false;
 
  return true;
}

You may be saying, 'where can I get this swell tool?' Well from jQuery's plugins page of course.

UPDATE:
Here's a demo!

Cory O'Daniel - These are just words » stupidreferencestorandomthings

BabySteps – jQuery Step-by-Step Forms