jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard. (Demo)
Required files:
+ jquery.stepy.min.js
+ jquery.stepy.css
Default configuration:
$('#step').stepy();
<form id="step">
<fieldset title="Title">
<legend>description</legend>
<!-- input fields -->
</fieldset>
<fieldset title="Title">
<legend>description</legend>
<!-- input fields -->
</fieldset>
<input type="submit" class="finish"/>
</form>
Demo:
Please:
- Format your code before paste it here, I will probably have to read it;
- Use code formatter to write it:
[source language="javascript"]your_code_here[/source]
Xtyan
May 2nd, 2012
Hi, I’m using stepy and it is working great.
I would like to exec fnStepy_GO, only if all fields of current step are valid. Now, after execute this function the errors are showed.
How do i do that?
next: function(Index) { fnStepy_GO(Index); },wbotelhos
May 5th, 2012
Hi Xtyan,
If the step is valid then it will go to the next step, then you can put your function inside the ‘select’ callback.
karl
March 1st, 2012
Hey marco,
I love your steppy plugin it is amazing and has done everything I need it to do, I just wanted to ask if you could give me an example as im a real newb when it comes to this stuff. of how I would test to see when the 2nd step is visable and then run a select stament when it loads. the reason I ask this is because I need to do a select from my db and the select statement needs to be based on a selection that is on the first step. any help would be greatly appreciated!
Thanks so much for your time i look forward to your reply.
wbotelhos
March 1st, 2012
Hi karl,
My name is Washington. :P
You can to use the callbacks next(index) { } or select(index) { } and get the argument index to know the next step or the current one.
Karl
March 1st, 2012
Hey Washington :P, sorry about the name.
Could you give me a example of what i am wanting to do i have been triyng it from all sorts of ways and just cant get it .
what i have so far is here
show step 1 – perfect
Then I want to test when the 2nd step is loaded then alert something
then 3 … dosnt matter.
Thnaks Heaps
wbotelhos
March 1st, 2012
Hi Karl,
Here the example: http://www.wbotelhos.com/stepy/#callback-demo
Try:
if (index == 2) { // 2 is the number of the step I want. }inalgnu
February 22nd, 2012
The demo is not working on IE7, any solution? this will be fixed?
wbotelhos
May 5th, 2012
Hi inalgnu,
I did not check it up.
Could you open an issue for me not forget it?
Thiago Montovaneli Albertino
February 10th, 2012
E aê, fí…blz?
Esse wizard vai quebrar um galhão … mas preciso confirmar se tem como fazer com que cada etapa do wizard seja carregada sobre demanda. Imagine que cada etapa seja um fragmento de página e essas devem ser carregadas somente quando o foco for para sua etapa. Tem como?
Abraço, parabéns!
wbotelhos
February 10th, 2012
Fala Thiago,
Você precisa de no mínimo saber quantos passos terá, pois só assim serão criado os links e botões.
O conteúdo poderá ser carregado no callback
select, executado assim que o step é selecionado.Michael
January 8th, 2012
I am using the code from the jQuery iFrame Sizing tutorial (http://sonspring.com/journal/jquery-iframe-sizing) to auto-size the iframes on my page; however, it does not appear to be functioning properly within Stepy.
On my application, the jQuery sets the inline style height to “0″ when I look at the code in Firebug.
Here is an example: http://jsfiddle.net/wvkfn/3/
If you look at the HTML in the example, Step 2 has an iframe in it (which is not displaying). If you remove the code to load Stepy, it appears correctly.
Any ideas why this is happening?
wbotelhos
February 5th, 2012
Hi Michael,
The problem is that your script is running before Stepy get ready. You can create a callback within the Stepy to run your code. Or wait still later to run your script.
Tanae Akihiko
January 4th, 2012
Thanks for a nice plugin. We use it in user’s inquiry form. No Problem in displaying Japanese characters (UTF-8).
wbotelhos
February 5th, 2012
Hi Tanae,
Good to hear that.
If you want, send me the link and I add it to the “who” area on site.
MyP
December 29th, 2011
Hello, the plugin works great but there is an error in an initialization function that causes Jquery not working in Internet Explorer 7, to solve the problem, we must remove the comma. The function is $ (‘# custom’). Validate and must be changed:
‘day’: {required: ‘field is required Day!’ },
by
‘day’: {required: ‘field is required Day!’ }
wbotelhos
December 29th, 2011
Hi MyP,
Thanks for the information.
What do you think about a pull request fixing it? (:
Wout
December 5th, 2011
Hello,
The last zip works well for the step validator so far. Thank you!
Regards Wout
Wout
December 4th, 2011
Hello,
I’m trying to implement the form validation steps.
When I make 4 steps in stead of 3 the form stopped at step 3. I’m not so familar with jquery. Do you know what I do have to change. I have to put 6 steps in the form. Thanks.
Sorry for my English, Wout from the Netherlands
wbotelhos
December 4th, 2011
Hi Wout,
Do you using radio buttons?
jQuery Validation 1.9 has a bug, then you need downgrade it or use this [1] fixed version, but not yet accepted.
[1] https://github.com/wbotelhos/jquery-validation/blob/master/jquery.validate.js
wbotelhos
December 4th, 2011
Hi Wout,
I did a workaround to avoid jQuery Validation breaks Stepy. Please, try that [1] new version.
[1] http://github.com/downloads/wbotelhos/stepy/jquery.stepy-1.1.0.zip
Michael
November 27th, 2011
Is there a way to pull the value of the “current” step from the plugin?
I am using Stepy to dynamically create forms, and the site is setup so the user can leave the form from from a step, but I’d like to have a variable set, so that when they complete an additional task, it takes them back to the last step they were on.
Is something like this possible?
wbotelhos
November 27th, 2011
Hi Michael,
The last fix, worked?
You have the index in the
clickcallback to know which step you are.You have the data in the form as well, then just manipulate it with jQuery.
Maybe jQuery Cookie helps you with the data.
Michael
November 28th, 2011
Yes, that last fixed worked perfectly. Thanks so much…you’ve been very helpful! :)
I decided to use the select callback, to post to a page to set a session variable, and then use that variable to set the return page.
http://stackoverflow.com/questions/8289427/how-to-pull-value-from-jquery-plugin-and-set-as-php-variable
Thanks again for all of your help!
wbotelhos
November 28th, 2011
Yes Michael,
That is the idea. ;)
Mike
November 25th, 2011
I have been using your Stepy plugin, and love it! :)
I am running into an issue however with multiple radio buttons. I posted my issue on StackOverflow:
http://stackoverflow.com/questions/8271295/how-to-fix-radio-button-validation-between-steps-in-jquery-plugin
Any ideas on why this is happening?
wbotelhos
November 25th, 2011
Your comment is awaiting moderation.
Hi Mike,
I can’t see you jQuery Validation code.
Did you set it?
Mike
November 25th, 2011
Yes, if you look at the fiddle:
http://jsfiddle.net/5Rd7A/3/
I set class=”required” in the HTML and called the jQuery Validation plugin code in the “managed resources” tab on the left.
I’ve tried it the other way too. See fiddle:
http://jsfiddle.net/5Rd7A/12/
Neither work :(
wbotelhos
November 26th, 2011
Hi Mike,
I found the bug in jQuery Validation 1.9. I did a pull request to fix it and answered you with details on Stack Overflow.
http://stackoverflow.com/questions/8271295/how-to-fix-radio-button-validation-in-jquery-plugin
mauricio
November 10th, 2011
hi stepy is great , but im new with jquery and im making a form with 4 step in the step 3 i want to upload some pic in a flash form and i had a link
a href=”#” onClick=”document.getElementById(‘agileUploaderSWF’).submit();”>add pics
which it works but i wish to call this function when hit the next on the third step and validate
i try searching for the index like this
$('#custom').stepy({ onNext: function(index) { if (index == 3) { document.getElementById('agileUploaderSWF').submit(); } }but doesn´t work and also on the finish step a want to post action to and another url
please help!!!
thank MG
wbotelhos
November 13th, 2011
Hi Maurício,
First all, try to use the last version of Stepy, then you should try
onNextto justnext.If you submit your form without ajax, the page will be refreshed and the step will back to first, then use ajax.
To change you url on last step you must change the action of the form with jQuery, it is not a job for Stepy.
Michael
October 17th, 2011
This is a GREAT plugin! I have one, probably stupid, question.
I am confused how to use the public function:
$.fn.stepy.step(2, ‘#stepy’);
I want to have a link elsewhere on the page that will allow the user to jump to a step midway through the form. How do I call this function with a link?
Also, is it possible to have a link on a separate page, that when clicked will take the user to the page with the form at a specific step?
Thanks for your help!
wbotelhos
October 17th, 2011
Hi Michael,
Thanks. You can use:
function goToStep(index) { $.fn.stepy.step(2, ‘#stepy’); } <a href="javascript:void(0);" onclick="goToStep(2);">Step 2</a>You can pass a parameter on URL and based on that parameter call the function
goToStep().Michael
November 26th, 2011
I’m not sure I follow. What if I am on a separate page? Can I pass a GET parameter? How would this work?
wbotelhos
November 26th, 2011
Hi Michal,
You can pass a parameter then on your next page check this parameter and call the function:
$('#step').stepy('step', paramNumber);Could you open a issue to create param like
stepy=1to go to a specific step, here [1] please?[1] https://github.com/wbotelhos/stepy/issues
claudio
October 11th, 2011
hi. In some case I need to hide or show an tab. I’ve tried with $(‘#idOfTheLabel’).hide();
But nothing..
can You help me please?
wbotelhos
November 2nd, 2011
Hi Claudio,
You always should let one tab visible.
You can change between it using the function
.step();Amir
September 29th, 2011
Hi,
great too, thanks.
I’m using it to slide form that have background image in every step. Can I use left to right slide of the steps such as the one in the following link – http://css-tricks.com/examples/FeaturedContentSlider/ .
thanks,
Amir
wbotelhos
September 29th, 2011
Hi Amir,
Stepy has no animation.
You can leave all the fields visible and try to implement the slide.
Dan B
September 28th, 2011
Ok –
I sent you a separate email on your listed email, asking about some consulting work
Thanks for your help!
Dan B
September 28th, 2011
Although I am feeling dumber by the second, it didnt work either
wbotelhos
September 28th, 2011
Well Dan,
Then I’m sorry, just by text is hard to help you in this case, but try to use Firebug to check your element and then change the style.
Dan B
September 28th, 2011
The problem seems to be that I want to apply a style to a . Here is the form:
…
Name*
…
CSS:
.errorMessage {color: #F00;}
And the ErrorPlacement
errorPlacement: function(error, element) {
error.appendTo( element.parent(“td”).next(“td”) );
I am getting the error to show up in the last (empty) – but even creating a new style and setting it in the html is not working. So its showing up correctly, but not styling or even recognizing the style if I use the class attribute of the
wbotelhos
September 28th, 2011
Hi Dan,
Weird, but tries the worst way:
element.addClass('my-error-class').parent("td").next("td")Dan B
September 28th, 2011
I apologize – my last post was not clear….
I have change the error placement to:
errorPlacement: function(error, element) {
error.appendTo( element.parent(“td”).next(“td”) );},
It works, but the message (“Required”) appears in black – I want it to be red like it was in the demo (just not placed under the form.)
I tried modifying the css style “label.error” but I cant just the font color to change.
Hope that is clearer
wbotelhos
September 28th, 2011
Hi Dan,
Inspect the text and make sure the element is a
labelto apply the style onlabel.error.Or change the element type to
input,select, something like or just.error.If you already have a
.errorstyle, try the override with!important.Dan B
September 27th, 2011
Hi –
I am trying to change the color of the error label (“Required”) and can not. Changing/adding to the class label.error does nothing.
The color is currently black – I just want to change it to red
Can you point me in the right direction please?
Thanks!
wbotelhos
September 28th, 2011
Hi Dan,
Try
label.error { color: #F00; }Dan B
September 20th, 2011
Hi –
this is a fantastic tool!!
Being new and not quite understanding everything jQuery, how would I call the validate function during a callback?
I am fooling around with the transition callback example and would like to validate the “name” field..
Thanks!
wbotelhos
September 28th, 2011
Hi Dan,
Just set the option
validatetotrue.Martin
August 27th, 2011
This works:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); var stepySelectedTab; function BeginRequestHandler(sender, args) { stepySelectedTab = 1; if ($('#ReportElementWizard-title-2').hasClass('current-step')) { stepySelectedTab = 2; }; if ($('#ReportElementWizard-title-3').hasClass('current-step')) { stepySelectedTab = 3; }; if ($('#ReportElementWizard-title-3').hasClass('current-step')) { stepySelectedTab = 4; }; } function EndRequestHandler(sender, args) { $.fn.stepy.step(stepySelectedTab, '#ReportElementWizard'); }wbotelhos
November 2nd, 2011
Hi Martin,
This is strange, because the title will have the current class-step only when the fieldset is displayed.
Be sure to perform the public function within a function
$(function() { }), and leave it for last, ensuring that all processing of your page is executed.Martin
August 26th, 2011
Hi! Thanks for a great plugin. It works wonderful except for this: The plugin is positioned in an Asp.Net UpdatePanel. If a control in say, Step 4 causes a postback the plugin returns to Step 1. As a workaround I thought I’d call something like $.fn.stepy.step(4, ‘#ReportElementWizard’); This does set the plugin back to Step 4 but also adds a style attribute “Display:none” to the enclosed fieldsets. Therefore only title and legend are still visible, the tab content has disappeared. Am I doing something wrong? Thanks!!
wbotelhos
November 2nd, 2011
Hi Martin,
Could you try the version 1.0.0?
Thanks.
inii
August 22nd, 2011
its awesome,
i have a question.. could this error message, displayed to specific fields?
wbotelhos
August 29th, 2011
Hi inii,
It is the responsibility of jQuery Validate.
Here you have several explanations: http://docs.jquery.com/Plugins/Validation
As you see on example documentation of the Stepy, you can change the
errorPlacementcallback like:errorPlacement: function(error, element) { $('#place').append(error); }Dana
August 12th, 2011
I’m using jQuery Stepy – A Wizard Plugin but i’m unable to hide the fieldset title somebody help???
wbotelhos
August 30th, 2011
Hi Dana,
Use the following option:
wilson
August 12th, 2011
Olá Washington!
Parabéns pela excelente ferramenta.
Estou testando e estou muito satisfeito.
Só uma dúvida , como posso configurar para quando o clicar no botão Finish os dados sejam enviados para outra página .php
Abraços e sucesso!!
wilson
August 15th, 2011
Já consegui me virar.
Obrigado!!
wbotelhos
August 29th, 2011
Hi Wilson,
It is the same as any other form configuration, regardless of the Stepy.
Just use a submit button or put an onclick action on the button element.
csheets
August 11th, 2011
I am trying to upgrade to stepy 0.5.1 and validate 1.8.1 and I have run into a validation problem for “optional” fields – fields that are not required but have additional validation such as maxlength. What seems to be happening is that it is always required even though the required: false rule is being applied. Any help would be appreciated. My validation rule is as follows:
KEY: {required: false, maxlength: 5 }wbotelhos
August 11th, 2011
Hi csheets,
Yes, unfortunately we have a problem.
It was occurred by my mistake on this issue: https://github.com/wbotelhos/stepy/pull/2
We must keep the variable
isCurrentElementValidto compare if the return isundefinedthrowed be the jQuery Validate on your case.undefined && truemust betrue, but it returnsfalse, then the validate fails when it should not.Can you open a issue for it, please?: https://github.com/wbotelhos/stepy/issues
Graham Peel
July 26th, 2011
Hi there. I like this plugin a lot but it seems to tank when used in an ASP.NET webforms app (not MVC). The final step in my page has a Link Button to trigger a function on postback, and when it fires, all the form fields are reverted to blanks for some reason. Any ideas? (Not sure if you’ve ever had to mess with Web forms for .NET, if not, no biggie, I’ll just have to figure something else out)
wbotelhos
July 29th, 2011
Hi Peel,
The Stepy will not keep you value like cookie or something.
Probably you doing a postback and a redirect in which there is no data that you just send to your controller.
Try to keep it in the request with forward and apply the correctly names on inputs.
Paul
July 23rd, 2011
Hi, I know this is probably completely thick of me, but i’m struggling to get my head around this..
What i’d like to know is:
How can I take your example of a custom form using Stepy, and add validation to it aswell?, only it should check validation first, then if it’s ok do a callback process ?
I have tried mashing the two examples together to no avail – i’ll keep trying in the interim.
Cheers for what (so far!) looks to be a BRILLIANT piece of work.
Paul
Nathan
July 20th, 2011
This is a nice control. I have had issues though, getting jQuery validation to work. I constantly get the error ‘element is undefined’ from jquery.validate.js line 808 (inside staticRules function()) in FireBug and the validation doesn’t run.
Has anybody else seen and/or resolved this? My html code is :
“Your code does not appear. Put it into the tag: ([)source language="html"(]) … ([)/source(])
Then my javascript code:
$(function () { $('#CreateArtist').stepy({ validate : true }); $('#CreateArtist').validate({ errorPlacement: function (error, element) { $('#CreateArtist div.stepy-error').append(error); }, rules: { "FirstName": "required", "LastName": "required" }, messages: { "FirstName": "FirstName field is required!", "LastName": "LastName field is required!" } }); });If someone has seen this before, I’d appreciate a response!
Thanks muchly
wbotelhos
July 23rd, 2011
Hi Nathan,
I did some tests using you script code and it worked fine with the following versions:
jQuery 1.6.1rc1, Validate 1.8.1 and Stepy 0.5.1
You HTML did not appear then a used the following field:
* Try not to use ID and fields names with the first letter in uppercase, it’s not a good practice.
Jim
July 20th, 2011
Hi wbotelhos,
I hope you fine ..
what is the function name under next, back and finish button ?
because I need call it from another link ..
how can I customize the finish action .. assume that I need go to another page ?
Best Regards
wbotelhos
July 20th, 2011
Hi Jim,
There is no function next, back or finish.
You can use the index value to choose the step you want like:
You can use selector jQuery to click the back, next or finish button too.
Raed
July 20th, 2011
Hi Dear,
How can I dedect asp elements inside validation code ?
rules: {
‘rdlViews’: ‘required’
},
messages: {
‘rdlViews’: { required: ‘required field missed !’ }
}
});
wbotelhos
July 20th, 2011
Hi Raed,
Independently of language, the Validate detects the field by its name.
If you want use asp values, you can select this value by JavaScript or in the case like JSP, using EL.
Jerry
July 15th, 2011
I am using jquery stepy with ie browser. It is very cool, but I have one question. It often displays exception like this: the console is undefined.
I google it and get that the console is for firefox, so I delete the code
if (console && console.log) { console.log(f); }from jquery.stepy.min.js.
now it doesn’t display that exception any more. However I am not sure if this is the best solution to this problem. I will really appreciate if you give me a hand.
wbotelhos
July 15th, 2011
Hi Jerry,
Was my bad, change to:
if (window.console && window.console.log) { window.console.log(message); }Or use the last version: https://github.com/wbotelhos/stepy/downloads
Bruno Cezar Rocha
June 29th, 2011
Olá,
A noite inteira programando e terminei.
Veja como ficou e se tem alguma critica/sugestão.
codigo Python:
https://bitbucket.org/rochacbruno/powerformwizard/src/ba92ee7c7627/modules/plugin_PowerFormWizard.py
Live Demo:
http://labs.blouweb.com/powerformwizard
Abraço, e mais uma vez Obrigado!
@rochacbruno
wbotelhos
June 29th, 2011
Oi Bruno,
Muito bom!
Fico feliz de você ter se forkado o projeto e ter dado os créditos.
Assim que possível irei contribuir com o que eu puder.
Depois eu linko o PowerFormwizard no projeto do Stepy. (;
Parabéns! (:
Bruno Cezar Rocha
June 29th, 2011
Hi,
I just created a plugin to integrate your libs with web2py Python Framework.
The result is on labs.blouweb.com
The first released is the web2py PowerFormWizard (which will be included in PowerPlugins)
That is based on your Stepy! thank you!
Your credits are properly on the source and license is MIT.
Thanks.
Lucky
June 22nd, 2011
Hi, I have a question..
How can I make the field focused when the error found? Currently, it only focused on the first field…
Thx
wbotelhos
June 23rd, 2011
Hi Lucky,
You right, we have a problem with focus.
Could you open a issue for it please?: https://github.com/wbotelhos/stepy/issues
Thanks. (:
wbotelhos
June 24th, 2011
Hi Lucky,
Fixed by the following commit:
https://github.com/wbotelhos/stepy/commit/cd4e9a56001cb49ae59918fff11957ab34871e62
Use the last version 0.5.1: https://github.com/downloads/wbotelhos/stepy/jquery.stepy-0.5.1.zip
Thanks. (:
Andrea
June 20th, 2011
Hi wbotelhos!
Very good plugin for wizard :)
When I insert in field form wrong value the validate engine show me the error message. It’s correct!
Can I hide this messages without insert correct value?
I use stepy in a form placed into a jQuery Dialog, I’d like that when user close the dialog without insert correct value, I can clean text and delete error messages.
It could be a feature request :P
Sorry for my English!
Thank you in advance for any answer.
Andrea
wbotelhos
June 23rd, 2011
Hi Andrea,
Stepy can clear “only” the div with the error text, because the field error (highlight) should be cleared by jQuery Validate. Just to the Stepy do not be intrusive.
You can clear the div error using the jQuery selector:
$('#stepy-id').children('.stepy-error').empty();DevPHP
June 9th, 2011
Hi,
I’m using stepy and it is working great.
However – although a bit stupid – when there’s only one fieldset (in my app a user can make this happen since fieldsets are generated dynamic) the submit-button is not shown.
How can I show the submit-button manually?
Thx in advance.
James
wbotelhos
June 17th, 2011
Hi DevPHP,
It was fixed by the version 0.5.0: https://github.com/downloads/wbotelhos/stepy/jquery.stepy-0.5.0.zip
Thank you for report!
Neha
May 24th, 2011
Hi, I tries stepy and everything is great.
The only thing that I am concerned is that if I have more than 10 steps in my wizard, it doesn’t work with steps greater than 10.
How can I make it work? Please suggest.
Thanks in advance,
Neha
wbotelhos
May 25th, 2011
Hi Neha,
It was fixed by the following commit:
https://github.com/wbotelhos/stepy/commit/741952af4625e671dfbc7dd30a1c72d8c88d8c3d
Thanks for the report. (:
Tamil Vendhan
May 10th, 2011
Hi, i am using your stepy.js Its working cool, but i want to hide the titles sometimes. How do i do that?
wbotelhos
May 25th, 2011
Hi Tamil,
You can use, with the last version, the ID of the title:
$('#stepy-title-0').hide(); //$('#' + ID_OF_THE_GRID + '-title-' + (INDEX - 1)).hide();Brandon
March 14th, 2011
I’m using your jQuery Plugin Stepy and so far it is great!
I do have a question though – how could I trigger a function on the last “next” button?
I need to use it to calculate fields in the final step instead of having the user click a special button like “Calculate” or “Submit”.
Thanks!
Brandon
wbotelhos
March 14th, 2011
Hi Brandon,
You can ask if the
indexis the last like:$('#form').stepy({ onNext: function(index) { if (index == QTY_STEP) { alert('My function here!'); } } });