javascript - 在按钮上运行 Jquery 代码的问题单击我的向导步骤 Jquery 代码

Question

我在 View 中为我的表单使用向导步骤，我的项目在 MVC3 上。

我有一个由 3 个步骤组成的表单，这意味着我的表单中的每个步骤都有三个标签以及后面的两个按钮:

<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><     
<p><input type="button" value="Back id="back-step" name="back-step"></p>

在我的第一步中，我只有一堆 TextBoxes、DropDownlists 和 TextAreas，第二步有很多客户端功能，一个例子是用户可以将行从一个表移动到另一个表等等。我有一个 Jquery 验证如下:

                var customTbl = $('#CustomPickedTable');
                var has1 = customTbl.find('td[data-row="1"]').is('*');
                var has2 = customTbl.find('td[data-row="2"]').is('*');
                var has3 = customTbl.find('td[data-row="3"]').is('*');
                var has4 = customTbl.find('td[data-row="4"]').is('*');
                if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
                    jAlerts("Saved", "Info");
                } else {
                    jAlert('You have to move atleast one row from each table', "Varning"); ;
                     return false
                }

在第 3 步，它只是对创建的内容进行审查，当用户单击它时，我的下一步按钮会提交表单。

我希望能够做的是，当用户处于第 2 步并单击下一步按钮时，上面的 jquery 验证应该运行。使用我的向导步骤代码我无法做到这一点，因为它对所有内容都使用下一步按钮选择器。有解决办法吗？

我尝试将我的 Jquery 验证码放在里面

$("#next-step").click(function () {

}

但是每次用户单击下一步按钮时我的 jquery 验证代码都会运行，因为我的表格显示在表单中但隐藏了，当用户单击下一步时验证会在第一步触发。所以那个解决方案没有用。

这是我的向导步骤 Jquery 代码，现在我在底部有我的 Jquery 验证，这意味着当我在第 3 步并单击下一步按钮时，它将验证然后发布。但我不希望它变成那样。我希望在第 2 步进行验证。

代码如下:

$(function () {

            $(".wizard-step:first").fadeIn(); // show first step
            // attach backStep button handler
            // hide on first step
            $("#back-step").hide().click(function () {
                var $step = $(".wizard-step:visible"); // get current step
                if ($step.prev().hasClass("wizard-step")) { // is there any previous step?
                    $step.hide().prev().fadeIn(4500);  // show it and hide current step

                    // disable backstep button?
                    if (!$step.prev().prev().hasClass("wizard-step")) {
                        $("#back-step").hide();
                    }
                }
            });


            // attach nextStep button handler       
            $("#next-step").click(function () {

                var $step = $(".wizard-step:visible"); // get current step
                var validator = $("form").validate(); // obtain validator
                var anyError = false;
                $step.find("select").each(function () {
                    if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }

                });
                $step.find("input").each(function () {
                    if (!validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }

                });

                $("#next-step").click(function () {
                    if (!validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }


                });

                if (anyError)
                    return false; // exit if any error found

                if ($step.next().hasClass("confirm")) { // is it confirmation?
                    // show confirmation asynchronously
                    $.post("/wizard/confirm", $("form").serialize(), function (r) {
                        // inject response in confirmation step
                        $(".wizard-step.confirm").html(r);
                    });

                }

                if ($step.next().hasClass("wizard-step")) { // is there any next step?
                    $step.hide().next().fadeIn(4500);  // show it and hide current step
                    $("#back-step").show();   // recall to show backStep button
                }

                else { // this is last step, submit form
                    var selectedQuestions = $("#SelectedQuestions");
                    var selectedCustomQuestions = $("#SelectedCustomQuestions");
                    var currentIds = new Array();
                    var currentText = new Array();

                    $("#CustomPickedTable td[data-question-id]").each(function () {
                        var clickedId = $(this).attr("data-question-id");
                        currentIds.push(clickedId);
                    });
                    $('#CustomPickedTable td[data-attr-id]').each(function () {
                        var ClickedText = $(this).html();
                        currentText.push(ClickedText);
                    });

                    selectedCustomQuestions.val(currentText.join("|"));
                    selectedQuestions.val(currentIds.join(","));

                    var customTbl = $('#CustomPickedTable');
                    var has1 = customTbl.find('td[data-row="1"]').is('*');
                    var has2 = customTbl.find('td[data-row="2"]').is('*');
                    var has3 = customTbl.find('td[data-row="3"]').is('*');
                    var has4 = customTbl.find('td[data-row="4"]').is('*');
                    if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
                        jAlerts("saved", "Info");
                    } else {
                        jAlert('You have to move atleast one row from each table', "Varning"); ;
                    }
                    return false;

                }

            });

我的 html 代码看起来像这样:

<div class="wizard-step>

   //step 1 content

</div>
<div class="wizard-step>

//step 2 content

</div>
<div class="wizard-step>

//step 3 content

</div>
<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><     
<p><input type="button" value="Back id="back-step" name="back-step"></p>

Answer 1

我认为如果您检测到您在哪个向导步骤使用 jquery .index() 函数会更好。这样，只有当您在第二步进入第三步时，您才能在下一步点击处理程序中进行验证。代码看起来像这样:

 $("#next-step").click(function () {

            var $step = $(".wizard-step:visible"); // get current step
            var stepIndex = $(".wizard-step").index($step); //index returns 0 based index so second step would be 1.

            var validator = $("form").validate(); // obtain validator
            var anyError = false;
            $step.find("select").each(function () {
                if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }

            });
            $step.find("input").each(function () {
                if (!validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }

            });


            if (anyError)
                return false; // exit if any error found
            if(stepIndex == 1) //if you are on second step then validate your table 
            {
               var customTbl = $('#CustomPickedTable');
               var has1 = customTbl.find('td[data-row="1"]').is('*');
               var has2 = customTbl.find('td[data-row="2"]').is('*');
               var has3 = customTbl.find('td[data-row="3"]').is('*');
               var has4 = customTbl.find('td[data-row="4"]').is('*');
               if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
                  jAlerts("Saved", "Info");
               } else {
                  jAlert('You have to move atleast one row from each table', "Varning"); ;
                  return false
               }
            }

            else if ($step.next().hasClass("confirm")) { // is it confirmation?
                // show confirmation asynchronously
                $.post("/wizard/confirm", $("form").serialize(), function (r) {
                    // inject response in confirmation step
                    $(".wizard-step.confirm").html(r);
                });

            }

            if ($step.next().hasClass("wizard-step")) { // is there any next step?
                $step.hide().next().fadeIn(4500);  // show it and hide current step
                $("#back-step").show();   // recall to show backStep button
            }

            else { // this is last step, submit form
                var selectedQuestions = $("#SelectedQuestions");
                var selectedCustomQuestions = $("#SelectedCustomQuestions");
                var currentIds = new Array();
                var currentText = new Array();

                $("#CustomPickedTable td[data-question-id]").each(function () {
                    var clickedId = $(this).attr("data-question-id");
                    currentIds.push(clickedId);
                });
                $('#CustomPickedTable td[data-attr-id]').each(function () {
                    var ClickedText = $(this).html();
                    currentText.push(ClickedText);
                });
            }

        });