.Validate jQuery 验证插件不忽略隐藏字段

Question

我是 jQuery 和 .Validate jQuery 验证插件的新手。我正在尝试将其集成到多步骤形式中。基本上，我已经根据用户按下的下一个按钮设置了一个开关，并且希望仅基于此验证表单的特定部分。

当我成功验证表单的第一部分并移至第二个字段集时，下一组字段已经出现验证错误。我尝试禁用这些字段（这会阻止我正在使用的滑块逻辑由于某种原因而无法工作），特别是告诉它按类忽略该字段集并直接声明 ignore: ":hidden" 即使它是默认行为。

我已将遇到问题的代码放在此处的 jsFiddle 中：http://jsfiddle.net/13x7Lbk7/4/（已更新）

这是我的代码中调用表单第一步验证的特定部分：

$(".next").click(function(){

// Initialize form
    var form = $("#frmSignup");

    // Determine which step of the form we're on
    switch($(this).attr("value")) {

            case "step1": 

            $("#frmSignup").validate({
              rules: {
                    txtZipCode: {
                        required: true,
                        number: true,
                        minlength: 5,
                        maxlength: 5,
                    },
                    txtSchoolName: {
                        required: true,
                        minlength: 5,
                    },
                },
                messages: {
                    txtZipCode: {
                        required: "Zip Code Required",
                        number: "Enter a valid 5 digit zip code",
                        minlength: "Enter a valid 5 digit zip code",
                    },
                    txtSchoolName: {
                        required: "School Name Required",
                    },
                },            
            });

            break;
// --- SNIP ---

} // End step switch


    if ($("#frmSignup").valid() == true){

// Fieldset logic is here, see jsFiddle if you're curious

} // End isValid if

}); // End click function

这里是前两个字段集的相关 HTML：

    <fieldset class="fsStep1">
    <h2>Step 1</h2>
    <h3>Information</h3>
    <label for="txtZipCode">Zip Code</label>
    <input type="text" name="txtZipCode" value="" pattern="\d*" id="txtZipCode" required />
    <label for="txtExample">Example Field</label>
    <input type="text" name="txtExample" value="" id="txtExample" required />
    <hr />
    <button name="next" value="step1" class="next action-button">Next</button>
  </fieldset>
  <fieldset class="fsStep2">
    <h2>Step 2</h2>
    <h3>Example</h3>
    <label for="txtInfo">Info</label>
    <input type="text" name="txtInfo" id="txtInfo" value="" pattern="[a-zA-Z -]+" required />
    <label for="txtOther">Other</label>
    <input type="text" name="txtOther" id="txtOther" value="" pattern="[a-zA-Z -]+" required />
    <hr />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <button name="next" value="step2" class="next action-button">Next</button>
  </fieldset>

我确定我在这里遗漏了一些愚蠢的东西，但我一直在查看代码、查看文档、搜索网络，而且我整天都在碰壁。请把我从我的谜团中解脱出来，并告诉我究竟为什么我是愚蠢的。 :) 谢谢！

Answer 1

好的，如果它不喜欢隐藏字段，使用这个技巧隐藏它们：

/*Hide all except first fieldset*/
#frmSignup fieldset:not(.shown) {
    height:0;
    overflow:hidden;
    position: absolute;
    top: -9999px;
}

将.shown 类添加到您的第一个字段集。

您没有.next 元素，但buttons 名为next。

所以将$(".next").click 替换为$("button[name='next']").click。

您可以使用if ($("#frmSignup").valid())，而不是if ($("#frmSignup").valid() == true)。

您需要删除 HTML 中的 required 属性，因为 hidden 元素尚未填充，因此它们会阻止您进行下一步。让$.validate() 完成这项工作。

JS Fiddle Demo