如何在 JQuery 步骤中添加“重置”按钮答案

【问题标题】：How to add a "reset" button to JQuery-steps如何在 JQuery 步骤中添加“重置”按钮
【发布时间】：2014-06-27 20:40:31
【问题描述】：

我还没有看到有人问过这个问题——尽管我确实阅读了大约 100 个关于类似主题的 jQuery 步骤——似乎没有一个能解决我的问题。

我正在使用 jQuery-steps 并希望在第一步完成后添加一个“重置”按钮 - 以防我的用户想要清除表单并重新开始。我希望这个按钮在默认的“下一步”按钮之后被取消。

这是我目前基于默认基本形式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.");
        }
    });
});

【问题讨论】：

标签： jquery-steps

【解决方案1】：

您可以启用并使用cancel 按钮呼叫validator.resetForm()。请参阅以下示例：

$(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
            }
        }
    });
});

【讨论】：

【解决方案2】：

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

【讨论】：

请添加一些解释。仅代码的答案对未来的读者不太有用，并且不能解释 OP 的错误或如何解决问题。

【解决方案3】：

您必须使用以下代码添加一个清除按钮：

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

并且选择的布局应该被重置，最初它有一个当前类在当前课程的帮助下，我们将重置选定的选项卡：

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

最终版本：

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

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

【讨论】：