jquery验证不适用于所有字段

Question

我有一个包含不同字段集的表单。在每个步骤中，我都会使用仅应验证表单上可见元素的规则来验证整个表单。我可以看到在第一步验证工作正常。但在第 2 步中，仅验证了部分字段。这是表单的定义

<form id="enquiryForm" action="">
            <div id="fieldset1" style="display: block;">
                <fieldset class="addingenq">
                    <legend>
                        <h2>Contact information</h2>
                        <span class="steps">Step 1 of 3</span>
                    </legend>
                    <p>
                        <input type="text" id="firstname" name="first" value="" placeholder="First Name" required>
                    </p>
                    <p>
                        <input type="text" id="lastname" name="last" value="" placeholder="Last Name" required>
                    </p>
                    <p>
                        <input id="step1" type="button" value="Next" onclick="javascript: completeStep1();"/>
                    </p>
                </fieldset>
            </div>
            <div id="fieldset2" style="display: none;">
                <fieldset class="addingenq">
                    <legend>
                        <h2>Move information</h2>
                        <span class="steps">Step 2 of 3</span>
                    </legend>
                    <p>
                        <input type="text" id="originCity" placeholder="Origin City" required>
                    </p>
                    <p>
                        <input type="text" id="originCountry" placeholder="Origin Country" value="India" required>
                    </p>
                    <p>
                        <input type="number" id="originZip" placeholder="Origin Zip(Optional)">
                    </p>
                    <p>
                        <input type="text" id="destinationCity" placeholder="Destination City" required>
                    </p>
                    <p>
                        <input type="text" id="destinationCountry" value="India" placeholder="Destination Country" required>
                    </p>
                    <p>
                        <input type="number" id="destinationZip" placeholder="Destination Zip(Optional)">
                    </p>
                    <p>
                        Moving Date
                        <input type="date" id="movingDate" name="movingDate" required>
                    </p>
                    <p>
                        <input id="back_step1" type="button" value="Back" onclick="javascript: moveStep(2, 1);"/>
                        <input id="step2" type="button" value="Next" onclick="javascript: completeStep2();"/>
                    </p>
                </fieldset>
            </div>
            <div id="fieldset3" style="display: none;">
                <fieldset class="addingenq">
                    <legend>
                        <h2>Moving Requirements</h2>
                        <span class="steps">Step 3 of 3</span>
                    </legend>
                    <span class="form-subhead">Item List</span>
                    <p>
                        Packaging Material Rating
                        <input id="pmr" name="start" type="number" value="1" />
                    </p>
                    <p>
                        <input id="back_step2" type="button" value="Back" onclick="javascript: moveStep(3, 2);"/>
                        <input id="step3" type="button" value="Submit" onclick="javascript: completeStep3();"/>
                    </p>
                </fieldset>
            </div>
        </form>

这是我正在使用的验证规则

    $("#enquiryForm").validate({
        ignore : ":not(:visible)",
        rules : {
            originZip : {
                required : false,
                digits : true
            },
            destinationZip : {
                required : false,
                digits : true
            }
        }
    });

现在的问题是，在第 2 步中，我只看到正在验证的始发城市，而没有其他任何内容。 “originCity”文件后没有元素被验证。甚至没有带有必需标签的字段。我有什么遗漏吗。有人可以帮忙吗？

Answer 1

您错过了验证插件工作所需的输入元素的name 属性。来自docs：

name 属性对于输入元素是“必需的”，没有它验证插件将无法工作。通常 name 和 id 属性应该具有相同的值。

这是一个有效的 jsFiddle：http://jsfiddle.net/tP4tj/