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验证插件工作所需的输入元素的属性.来自文档:

name属性对于输入元素是"必需的",如果没有它,验证插件就不起作用.通常,name和id属性应具有相同的值.

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