Markup

Creates a HTML markup where should have a wrapper, like a form and any elements "steps" you want.
You can use fieldset as the step and legend to describe this steps.

Is not mandatory use the indicated markup, you just need to setup the right classes for Stepy bind everything right:

Each step should have class stepy-step;
Each step can have a description element with class stepy-legend;
You can have one or any buttons to go to the next step with class stepy-next;
You can have one or any buttons to back to the previous step with class stepy-back;
You can have one or any buttons to finish the wizard with class stepy-finish;

<form>
  <fieldset title="Step 1" class="stepy-step">
    <legend class="stepy-legend">legend one</legend>

    <!-- inputs -->
  </fieldset>

  <fieldset title="Step 2" class="stepy-step">
    <legend class="stepy-legend">legend two</legend>

    <!-- inputs -->
  </fieldset>

  <fieldset title="Step 3" class="stepy-step">
    <legend class="stepy-legend">legend three</legend>

    <!-- inputs -->
  </fieldset>

  <a class="stepy-back">back</a>
  <a class="stepy-next">next</a>
  <input type="submit" class="stepy-finish" />
</form>

Default

Using the default options.

$('form').stepy();

titleClick

You can to use the header items to navigate between the steps with a click.
The header click is good when you have a lot of steps and want to jump in a non sequential steps.

$('.form').stepy({ titleClick: true });

description

Each step receives a description that comes from .stepy-legend element located inside each .stepy-step.
The content of that element is used on header to describe the step, but you can disabled it passing false to this option.
This option does not hide the .stepy-legend element. If you want to hide just this element use CSS for it.

$('form').stepy({ description: false });

enter

By default, when you press the enter key, the next step will be called giving you a better usability.
If the option validate is enabled, then the step will be validated before it tries to change.

$('form').stepy({ enter: true });

finishButton

Selector for your finish button.

$('form').stepy({ finishButton: '.stepy-finish' });

finish

Callback to be called when you press the finish button.
Inside it you can prevent the submit returning false or let it be returning true or undefined.

$('form').stepy({
  finish: function() {
    alert('it will be prevented...');

    return false;
  }
});

legend

Display the .stepy-legend on .stepy-step.
When this option is false, it's just hidden. The content of the .stepy-legend element will still be used on description of the header.

$('form').stepy({ legend: false });

This callback is trigged before you go to the next step.
If you return false it will prevent the action.
Here you can do your own validation, manually or using your favorite plugin or just use the validate option.

$('form').stepy({
  next: function(index, total) {
    alert('Going to step: ' + index + ' with total of steps: ' + total);
  }
});

back

This callback is trigged before come back to the previous step.
If you return false it will prevent the action.

$('form').stepy({
  back: function(index, total) {
    alert('Returning to step: ' + index + ' with total of steps: ' + total);
  }
});

select

This callback is trigged when the current step is reached.
Here you can do actions to manipulate the current step, like change button states, manipulate progress bar etc.

$('form').stepy({
  select: function(index, total) {
    alert('Rendered step: ' + index + ' with total of steps: ' + total);
    }
});

titleTarget

Selector to indicate where the header will be appended.

$('form').stepy({ titleClick:  true });

transition

You can set an effect during the transitions between the steps.
You can choose fade, slide or undefined for no one.

$('form').stepy({ transition: 'fade' });

duration

If you turned on the transition, try to change the speed of it.

$('form').stepy({ speed: 600 });

header

If you don't want a header, you can just change header to false and it won't be created.

$('form').stepy({ header: false });

backButton

The class to find the back button inside the wrapper.

$('form').stepy({ backButton: '.stepy-back' });

nextButton

The class to find the back button inside the wrapper.

$('form').stepy({ nextButton: '.stepy-next' });

validate

You can integrate any plugin of validation to your steps, just saying if each field is valid or not.
The following example uses jQuery Validaty as example.
The validation error will not prevent the next step, if you want to prevent, use the option block.

var form = $('#block-demo');

form.validaty();

form.stepy({
  validate: function(field) {
    form.validaty('validate', $(field));

    return form.data('valid');
  }
});

block

If this options is true, when validate returns false the change to next step will be blocked.
This options is exclusive to be used with validation like so:

var form = $('#block-demo');

form.validaty();

form.stepy({
  block: true,

  validate: function(field) {
    form.validaty('validate', $(field));

    return form.data('valid');
  }
});

Options

back: undefined
Callback before the backward action.

block: false
Block the next step if the current is invalid.

description: false
Choose if the descriptions of the titles will be showed.

duration: 0
Duration of the transition between steps in ms.

enter: true
Enables the enter key to change to the next step.

errorImage: false
If an error occurs, a image is showed in the title of the corresponding step.

finish: undefined
Callback before the finish action.

finishButton: true
Include the button with class called '.finish' into the last step.

header: true
Creates a header with title and description.

ignore: ''
Choose the fields to be ignored on validation.

legend: false
Choose if the legends of the steps will be showed.

next: undefined
Callback before the forward action.

select: undefined
Callback executed when the step is shown.

titleClick: true
Active the back and next action in the titles.

titleTarget: undefined
Choose the place where titles will be placed.

transition: 'hide'
Use transition between steps ('hide', 'fade' or 'slide').

validate: false
Callback to each field of each step.

Changing the settings globally

You can change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.

Functions

$('form').stepy('step');

Goes to the given step.

$('form').stepy('destroy');

Destroy the Stepy's bind and gives you the raw element before it.