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

时间：2012-04-05 12:37:06

标签： javascript jquery jquery-selectors wizard

我在视图中使用向导步骤，我的项目在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>

2 个答案:

答案 0 :(得分：2)

我认为如果您使用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);
                });
            }

        });

答案 1 :(得分：1)

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

// 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/

相关问题
最新问题