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

Question

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

当我成功验证表单的第一部分并移至第二个字段集时，下一组字段出现时已经抛出验证错误。我试过禁用这些字段（这会阻止我正在使用的滑块逻辑出于某种原因工作），特别是通过 class 告诉它忽略该字段集并直接声明忽略：“：隐藏”，即使它是默认行为。

我已将遇到问题的代码放在此处的 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 class 添加到您的第一个字段集。

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

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

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

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

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

.Validate jQuery Validation Plugin not Ignoring Hidden Fields

javascript

forms

jquery

jquery-validate

JS Fiddle Demo