Question

我正在尝试使用JQuery Validation插件，但我遇到了一个小问题。我的表单使用以下方法隐藏/显示所需内容：

<div id="page1" class="page" style="visibility:visible;">
...Page 1 form content...
</div>
<div id="page2" class="page">
...Page 2 form content...
</div>

表格有两页......这是第1页上的按钮，允许用户继续。

<input type="button" id="C1" value="Continue" onClick="showLayer('page2')">

showLayer（）函数只是切换传递元素的可见性。唯一需要验证的内容是第1页，此按钮位于此处。我想要做的是先使用Continue按钮调用.validate（）然后成功验证后再进入第二页。研究表明，让onClick调用多个函数是一件容易的事情：

<input type="button" id="C1" value="Continue" onClick=".validate()";"showLayer('page2')">

虽然这在“技术上”有效，但是用户发现他自己正在查看第2页内容而不知道他/她是否在第1页上显示验证错误，除非他们点击“返回”按钮。显然不是一个非常有用的情况！

我试过这个，但仍面临同样的基本问题。

<input type="button" id="C1" value="Continue" onClick="formValidate()">

function formValidate() {
    .validate();
    showLayer('page2');
}

所需要的是确定验证功能是否成功返回，然后在假定所有验证通过的情况下有条件地继续到第2页。在对插件文档进行研究后，我发现以下内容是我最有可能（我思考）的候选者：

"invalidHandler"

    $(".selector").validate({

  invalidHandler: function(event, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? 'You missed 1 field. It has been highlighted'
        : 'You missed ' + errors + ' fields. They have been highlighted';
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

...但我不知道如何将它与所需的条件检查结合在一起。我不需要像示例所示显示错误计数，但它似乎做了正确的回调，错误计数（我会认为）提供成功检查的基础和框架有条件的。我可能正在咆哮错误的树，可能有更好的方法来实现这个...任何想法？所有人都非常感谢！

更新 * ** * ** * ** * ** * ** JSFiddle http://jsfiddle.net/uEh3a/ 不确定我是否已经做好了......第一次！

在我从Sparky添加代码之前，表单根据所选的单选按钮执行了一些自动计算。代码添加后没有计算，也不能在表单之间移动。我确定我做了一些愚蠢的事情......任何人都可以看到什么？

Answer 1

有很多方法可以做到这一点，但下面的演示还包含了您问题的大部分答案，即使用.valid()方法以编程方式测试表单。您可以全部或部分使用我的示例。

当我创建多步骤表单时，我为每个部分使用一组唯一的<form>标记。然后我使用the .valid() method测试该部分，然后再移动到下一部分。 （不要忘记首先初始化插件;在DOM准备好的所有表单上调用.validate()。）

然后在最后一节，我在每个表单上使用.serialize()并将它们连接成一个要提交的数据查询字符串。

像这样......

$(document).ready(function() {  // <-- DOM ready handler

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

重要的是要记住上面的click处理程序没有使用type="submit"按钮。这些是常规按钮，form代码的外部或type="button"。

只有最后一个表单上的按钮才是常规type="submit"按钮。那是因为我只在最后一种形式上利用插件的内置submitHandler回调函数。

“概念证明”DEMO：http://jsfiddle.net/dNPFX/

另外，请参阅参考：

https://stackoverflow.com/a/19546698/594235

Answer 2

您需要做的是在表单有效之前不要让他们更改页面。 jQuery Validate中的默认值是只验证“可见”字段，这对您有利。

在显示下一个“图层”之前，您正在进行验证。

首先，请参阅example from the documentation。

所以你的等价物就是这样做：

  //remember to save the validation object like this
  var v = $(".selector").validate({ /* ... */});  

  //then add a click handler for your button
  $("#C1").click(function() {
      //this runs the validation and shows errors if it fails
      if (v.valid()) {
          //only move forward if the validation succeeds
          showLayer('page2');
      }
  });

如何使用JQuery Validation Plugin进行条件成功检查？

2 个答案: