Getting setup issue with jQuery steps

Question

I am trying to implementing jQuery steps plugin and I started with my some basic html and form but I am not able to run steps. I have also check in console but there is no error.

I am setting up this example in my HTML: http://www.jquery-steps.com/Examples#basic-form

My Script code:

jQuery(function (){
    function errorPlacement(error, element){
        element.before(error);
    }  

    jQuery("#submit-steps").steps({
        headerTag: "h3",
        bodyTag: "ul",
        transitionEffect: "slide",
        onStepChanging: function (event, currentIndex, newIndex){
            jQuery("#form-2").validate().settings.ignore = ":disabled,:hidden";
            return jQuery("#form-2").valid();
        },
        onFinishing: function (event, currentIndex){
            jQuery("#form-2").validate().settings.ignore = ":disabled";
            return jQuery("#form-2").valid();
        },
        onFinished: function (event, currentIndex){
            alert("Submitted!");
        },
        labels: {
            cancel: "Cancel",
            finish: "Finish",
            next: "Continue",
            previous: "Previous"
        }
     }); 

});

My JSFiddle: http://jsfiddle.net/6Zd5u/26/

Need your help.

Thanks.

score 0 · Answer 1 · answered Jul 15 '14 at 06:58

Your HTML code doesn't seem to be right.

If you want to use h1 as header and ul as body tag, then only those tags are allowed within the wizard container and in the right order. For example:

<div id="wizard">
    <h1>Step 1</h1>
    <ul>
        ...
    </ul>
    <h1>Step 2</h1>
    <ul>
        ...
    </ul>
</div>

Note: When realizing a form I would recommend you to use the fieldset as body tag because of semantic reasons.

One last thing this blog article may interest you and helps you realizing a wonderful form.

Getting setup issue with jQuery steps

1 Answers1