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

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类添加到您的第一个.shown 。

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

因此，用$("button[name='next']").click替换$(".next").click $("button[name='next']").click 。

代替if ($("#frmSignup").valid() == true) ，可以执行if ($("#frmSignup").valid()) 。

而且，由于尚未填充隐藏元素，因此您required在HTML中删除required属性，因此它们将阻止您进行下一步。 让$.validate()完成这项工作。

JS小提琴演示