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

Question

我在视图中为我的表单使用向导步骤，我的项目在 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 步，它只是对创建的内容进行审核，当用户单击它时，我的下一步按钮会提交表单。

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

我尝试将我的 Jquery 验证代码放入

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

}

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

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

代码如下：

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

        });

Answer 2

我认为你可以通过重构代码来解决这个问题

// validate the inputs in a form
// @param {string|object} jquery selector or jquery object
function validateStep (selector){
  var $step = $(selector);
  var validator = $("form").validate();
  var anyError = false;

  $step.find("select").each(function () {
    if (!this.disabled && !validator.element(this)) {
      anyError = true;
    }

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

  if (!validator.element(this)) { 
    anyError = true;
  }

  return anyError;
}

这样你可以通过调用来验证第二步

// this works because jquery returns an array of objects
// as a result of the css selector we call it with
// the eq() function accepts an index value that returns
// the jquery object at that position
// see. http://api.jquery.com/eq-selector/
validateStep($('.wizard-step').eq(1));

还是第一个

validateStep('.wizard-step:first');

等等

我们可以像这样将它合并到您的代码中 -

$('#next-step').click(function (event){
  var $step = $('.wizard-step');

  if(validateStep($step.filter(':visible'))){
    // go to the next step
    if ($step.next().hasClass("wizard-step")) {         
      $step.hide().next().fadeIn(4500); 

      $("#back-step").show(); 
    } else {
      // submit form
    }
  }
});

注意：您可以在此处阅读有关 jQuery 选择器的更多信息 http://api.jquery.com/category/selectors/