http://wbotelhos.com/stepy

It doesn't load your javascript and your css anymore.

jquery ver_1.11
html:<input type="submit" name="submit" class="stepy-finish region_button">

I was check your site https://wbotelhos.com/stepy for appreciate your examples but show me the next error message:
"Error 502 Ray ID: 45769beb6ac0b70b • 2018-09-09 03:36:10 UTC
Bad gateway".
"Cloudflare Ray ID: 45769beb6ac0b70b • Your IP: 179.5.230.156 • Performance & security by Cloudflare"

puts tooltip on every element relative to the form number.

How to write my own function to the button created by me.

Cannot have Multiple stepy instances when using bootsrap specifically inside modals
even though different classes are specified

HI wbotelhos,

could you tell me how to add a function to the Back or Next Button?

thanks
sam

Currently, it only focus on the first field even though the field does not contain error. Preferably, it should focus on the first field that contain error

When a step is active most of the time its just that step that needs to be validated so you can change the line

$($step.find(':input:enabled').get().reverse()).each(function ()

to read

$($step.find(':input:enabled').not(":hidden").get().reverse()).each(function ()

This will only validate visible elements and not hidden steps. If you want more flexibility add a flag to properties for validatehidden:false and if someone wants that function they can set it to true (but i cant see any point of validating hidden fields)

Hi, as title say is there any way to know how many times a step was called in order to execute a function just the first time?

Sometimes when skipping a step with checkboxes in it, the validation will return an error:
Uncaught TypeError: Cannot read property 'name' of undefined

I'm not sure why this happens, the field does have the property 'name', but I solved it by an extra try/catch on line 290:

try {var fieldIsValid = $validate.element($(this));}catch (error){}

The stepy Works nice,

but i don't have a transition:

$('.formgen').stepy({
  backLabel:      'Zurück',
  block:          true,
  errorImage:     true,
  nextLabel:      'Nächster Abschnitt',
  titleClick:     true,
  validate:       true,
  duration  : 1400,
transition: 'fade'

});

This library currently has really limited and outdated documentation. It would be helpful if the author could expand on this documentation.

F.E. the library seems to expect & class ".stepy-finish" on a submit button, but the demo does not reflect this.

Hi,
I'ts possible to have the "NEXT" and 'PREV' button on top and bottom form ??

Regards

Massimo

We'd like to have a fade-in/fade-out animation when changing slides. How would one implement this?

If you have only one step there is a next button shown.

Some features planned next:

• Returning length of steps on back and next callback;
• Support to custom navigator, instead use our own;
• Adding a progress bar;
• Removing dependency of use a <form/>;

To add support of excellent H5F validation plugin in Stepy, just add this code:

jQuery.extend ({
        validator: {
                setDefaults: function () {
                    }
            }
    });
jQuery.fn.extend ({
        validate: function () {
                return {
                        element: function (field) {
                                return field.get (0).checkValidity ();
                            },
                        focusInvalid: function () {
                            }
                    }
            }
    });

PS: i think H5F is better than jquery validator plugin because it respect more the HTML5 syntax, so it will be easier to maintain source code when HTML5 will be fully supported by browsers

How can i call jquery function in final step?

Users may want to rename this button to something besides 'Finish'. Add an option to give the button a new name, just like the back or next buttons.

In case we have more than 10 steps, the following happens:

1. When I tried to browse to any step greater than 10 via the next and back buttons, it works fine.
2. When I tried to click on the links to go directly to any step greater than 10, it would repeatedly take me back to step 2.

Thanks,
Neha

When submitting a form containing invalid fields in previous steps, plugin will not jump back to bad step, like back and next buttons do!

This situation can occur when a field is under Ajax checking, so answer is delayed.

Hi, I've two doubts about your plugin:

1 - It's possible to display step content on title click? If so, how?
2 - How do I know in which step I'm in order to load some content using AJAX calls?

PS: amazing plugin man, thanks for your hard work

It looks like stepy is throwing:

$(step.find(':input:enabled').get().reverse()).each(function() {
        var fieldIsValid = $validate.element($(this));

        if (fieldIsValid === undefined) {
          fieldIsValid = true;
        }

        isValid &= fieldIsValid;

        if (isValid) {
          if (self.opt.errorImage) { <--- This line
            $title.removeClass('stepy-error');
          }
        } else {
          if (self.opt.errorImage) {
            $title.addClass('stepy-error');
          }

          $validate.focusInvalid();
        }
      });

Frankly, I'm unsure what I'm doing on my form setup that would cause this?

If you have a wizard with option "block" enabled and hit enter on the first step form the wizard moves to the last steps and validates the whole form. It would be better to move to the next step only!

Disabled fields are not tested, but in fact they should be!
1- in some cases, fields can be disabled while analyzing the input with Ajax!
2- a disabled field should contain a correct input in any case!

You should modify this line:
$($step.find(':input:enabled').get().reverse()).each(function() {

or add an option to test disabled fields

Thanks

jQuery('#custom').stepy({
back: function (index) {
var answer = confirm('Do you want to go to previous page? you may lose data of current page.');
if (!answer) {
return false;
}
}, next: function (index) {
if (!jQuery("#custom").validationEngine('validate') && index == "2") {
return false;
}

                var f = jQuery("#custom");
                var serializedform = f.serialize();
                //preloader();
                jQuery.post("/AdminNew/FrameAddjson", serializedform + '&indexval=' + index + '',
                       function (data, status) {
                           var frameid = data;
                           if (status == "success" && index == "2") {
                               alert("Frame added successfully");
                           }
                       });
            },
            select: function (index) {
            },
            finish: function (index) {
                if (!jQuery("#custom").validationEngine('validate')) {
                    return false;
                }
            },
            titleClick: true
            //validate: true
        });

Hi, Washington Botelho

I got some trouble with stppy when i am using a html editor, i can't get the value of textarea from server side.

this is the component: http://nicedit.com/ or ckeditor.com

Please help me.

Thanks

Best Regard's

Muchlis

Just letting you know when downloading the zip, the minified version is empty.

I used stepy for our wizard. I want to validate each element inside each field.
If all values entered means it should go to other field. else it should alert and return false?
How to accomplish this?
I have two validation plugins to be integrated with stepy. [Jquery Validation plugin or Parsley JS]

Note: I have gone through the documentation. I cant find exact hack of implementing it.

If a field was disabled, then validation should not be executed and it should not block.

Hi, its possible to show/hide steps on the fly? What I want to do is if I mark a checkbox (checked = true) then I should add a step between 1 and 2, it's possible? How?

With v1.1.0 under Firefox, if the option finishButton is true, then the _bindFinish method is called... however the var finish won't be assigned to the 'submit' button, line #132

finish = that.children('input[type="submit"]');

finish will be set to null, but a jQuery alternative is

finish = $(':submit',that);

Hi,
I really like this wizard plugin. I start to implement in my site, but I meet troubles with google maps.
When plugin is activated, map is not shown in whole window, but if I switch off stepy, maps is showing OK.
I attached pictures. Can you please check it, if is it possible to solve some-how?
Thank you very much.

In your examples at http://wbotelhos.com/stepy one can see that you have something like:

$('#step').stepy({
    next: function(index) {
        if (!isValid()) {
          alert('Invalid random value!');
          return false;
        }
        alert('Going to step ' + index + '...');
   }
});

but I get an error that isValid() is not defined, tried to find in the source code and there is no such method to be called publicly. How can I validate the current step?

not work

$('#frm1').stepy({
backLabel: 'Назад',
nextLabel: 'Далее',
legend: false
});

$('#frm2').stepy({
backLabel: 'Назад',
nextLabel: 'Далее',
legend: false
});

$('#frm3').stepy({
backLabel: 'Назад',
nextLabel: 'Далее',
legend: false
});

Hi
The fieldset title attribute has wrong behavior on Safari (and maybe other browsers): a mouseover tip will pop over the whole fieldset and all its included elements!
To avoid this problem, you should not use this reserved attribute.

@wbotelhos , thank for this amazing plugin.

Actually, I am working on uploading an image in stepy but I am unable to get it. Could you please tell me how can I upload image?

Looking forward to you quick reply.

how can i change the default step when using validation and advanced options ?

if i use something like this and i want to go to step 2 by default

$('#registration-form').stepy({
    block: true,
    description: false,
    finishButton: true,
    legend: false,
    titleClick: true,
    validate: true,
    step:2
});

won't work

if i use

$('#registration-form').stepy('step', 2);

it works but validation is lost

I am using stepy in a research form. The user can leave the form any time and return later in the last step. For user return I am using this:

$('form').stepy('step', "step number") *step number is a real number not the string "step number"

It´s working fine, but the problem is that validation doesn´t work anymore after that.

Hello! i need lot of help

I don't know how hide button next in a fieldset and call the action y other link?

http://wbotelhos.com/stepy

Almost made me go away.

Hi,

I am currently working on a personal project in which all my forms are validated using the validator engine from https://github.com/posabsolute/jQuery-Validation-Engine.

I just tried stepy in the project and it works marvelously well. my only problem is that it disables my validation plugin. Can you make it possible to support different kinds of validation plugins like the one am using or give me ideas on how to be able to get my validation plugin to work with stepy?

thank you.