Question

我是jQuery和.Validate jQuery Validation Plugin的新手。我试图将它整合成一个多步骤的形式。基本上，我已经根据用户按下的下一个按钮设置了一个开关，并希望仅根据该按钮验证表单的特定部分。

当我成功验证表单的第一部分并移动到第二个字段集时，下一组字段出现已经抛出验证错误。我已经尝试禁用这些字段（这会阻止我出于某种原因使用滑块逻辑），特别是告诉它按类忽略该字段集并直接声明忽略：＆＃34;：hidden＆＃34 ;即使它是默认行为。

我已经在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>

我确定我在这里遗漏了一些琐碎的东西，但我会不断浏览代码，查看文档，搜索网页，而且我整天都在碰壁。请把我从mysery中拿出来告诉我为什么我是愚蠢的。 :)谢谢！

Answer 1

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

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

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

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

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

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

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

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

1 个答案:

JS Fiddle Demo