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/

jquery验证不适用于所有字段

1 个答案: