step1.bindStep(‘#step2′,{
nextValidator: custom_validator(’step1′)
});

My form is quite complex so I wanted to create my own validation function but its having problems.

I have a link to jquery.js and to babysteps.js in the head.

I added the following in the body, just before the step1 div

var step1 = $(’#step1′);
var step2 = $(’#step2′);
var step3 = $(’#step3′);

step1.bindStep(step2);
step2.bindStep(step3);

$(’#step1′).show();

but like you it all remains hidden, presumably by the
.step{display: none;}
which I’m guessing should be over-writen by the
$(’#step1′).show();
but isn’t!

Then add the following to the head of the page after the plugin?

var step1 = $(’#step1′);
var step2 = $(’#step2′);
var step3 = $(’#step3′);
var step4 = $(’#step4′);
step1.bindStep(step2);
step2.bindStep(step3);
$(’#step1′).show();

I have labeled all my divs correctly, I am sure of that. Nothing displays at all due to the css.

I suppose all I am asking is, do I need to edit the plugin script at all to make it function in its basic format? Should adding my steps as above be enough to spark some action?

Thanks in advance for your help.

Jack

I tryed to use your demo and insert two fields:
one at beggining of the form (before <step1>)

and another one just before the end of form.

these two fields are sent, but all fields inside step divs are not sent.

This works great with jQuery Validate except when I click next step image button, there’s only one error message display at a time, the next error message will not displayed until you correct first. I would like to display all error messages at once when step button is clicked. Is there any way I can do that ?

Any help would be appreciated !

Jack