CODEWITHSUNDEEP
jqueryformsjquery-validate
Raghvendra Singh
Raghvendra Singh

Reputation: 1805

jquery validation not working for all fields

I have a form with different filed set. On each step i validate the whole form with the rule that only visible elements on the form should be validated. I can see that on step one the validation works fine. But on step 2 only some of the fields are validated. Here is the definition of the form

<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>

Here is the validation rule i am using

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

Now the problem is that in step 2 i see only origin city being validate and Nothing else. No element after "originCity" filed gets validated. Not even the fields with required tag. Am i missing anything. Can someone please help?

Upvotes: 3

Views: 6149

Answers (1)

input
input

Reputation: 7519

You missed the name attribute for the input elements which is required by the validation plugin to work. From the docs:

The name attribute is "required" for input elements, the validation plugin doesn't work without it. Usually name and id attributes should have the same value.

Here's a working jsFiddle: http://jsfiddle.net/tP4tj/

Upvotes: 9

Related Questions