How to add a "reset" button to JQuery-steps

Question

I haven't seen this question asked - though I did read probably 100 jQuery-steps about similar topics - none seemed to solve my issue.

I'm using jQuery-steps and would like to add a "reset" button after the first step is completed - in case my user wants to clear the form and start over. I would like this button to be incerted after the default "next" button.

This is my current script based on the default basic form here

$(function ()
{

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

    }
    $("#form").validate({
        rules: {
            zip: {
                required: true,
                maxlength:5,
                minlength:5
                },
            phone: {
                required: true,
                minlength: 10,
                phoneUS: true
            }

        }
    });


    $("#wizard").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex)
        {
            // Allways allow step back to the previous step even if the current step is not valid!
            if (currentIndex > newIndex)
            {
                return false;
            }


            $("#form").validate().settings.ignore = ":disabled,:hidden";
            return $("#form").valid();

        },
        onFinishing: function (event, currentIndex)
        {
            $("#form").validate().settings.ignore = ":disabled";
            return $("#form").valid();
        },
        onFinished: function (event, currentIndex)
        {
            alert("Thank you! Your request has been sumbitted.");
        }
    });
});

score 1 · Answer 1 · answered Jul 15 '14 at 07:15

You could enable and use the cancel button to call validator.resetForm(). See the following example:

$(function ()
{
    var validator;

    $("#wizard").steps({
        enableCancelButton: true,
        onCanceled: function (event)
        {
            validator.resetForm();
        }
    });

    validator = $("#form").validate({
        rules: {
            zip: {
                required: true,
                maxlength:5,
                minlength:5
            },
            phone: {
                required: true,
                minlength: 10,
                phoneUS: true
            }
        }
    });
});

score 0 · Answer 2 · edited Feb 02 '17 at 11:38

0

$form.find("[aria-label=Pagination]").append('<li class="" aria-disabled="true"><a class="imp-sub" href="#">Save &amp; Exit</a></li>');

edited Feb 02 '17 at 11:38

Fruchtzwerg

10,999
12
40
49

answered Feb 01 '17 at 11:22

Riliwan Balogun

308
1
2
10

Please add some explanation. Code-only answers are less useful for future readers and don’t explain the OP’s mistake or how to approach the problem. – Sebastian Simon Feb 02 '17 at 00:05

score 0 · Answer 3 · edited Jul 01 '20 at 10:03

You have to add a clear button by using below code:

$form.find("[aria-label=Pagination]").append('<li class="" aria-disabled="true"><a class="imp-sub" href="#">Reset</a></li>');

And the selected layout should be reset by initially it has a current class With the help of current class we will reset the selected tab:

$('.current').find('input:text').val('');

Final version:

form.find("[aria-label=Pagination]").append (' Clear' );

$(".btnClr").click(function() { validator.resetForm(); console.log(validator); $('.current').find('input:text').val(''); });

How to add a "reset" button to JQuery-steps

3 Answers3

Linked