Form Validation with multiple DIVs showing by show/hide functionality

Question

I have multiple DIVs in my page which are being shown one by one by using show/hide functionality. Where Two DIVs contains Form which requires validation.

In these DIVs I am not even able to use the HTML 5 validation as when I click on the submit button, that particular DIV hides and the next DIV shows.

So basically, before the next DIV appear, first DIV must show the validations required.

Please find my Code Mentioned below:-

HTML DIV 1 with Form 1

<div id="step3Content" role="Step3LocationInformation" class="marginLeft nodisplay">


<form>
    <h1>Location Information</h1>
        <table width="80%" id="locInfo">
            <colgroup>
                <col width="20%" />
                <col />
            </colgroup>
            <tr>
                <th>Street #1</th>
                <td>
                    <input type="text" name="lname" id="sadd1" required="required" /><span class="required">*</span></td>
            </tr>
            <tr>
                <th>Street #2</th>
                <td>
                    <input type="text" name="lname" id="sadd2" /></td>
            </tr>
            <tr>
                <th>City</th>
                <td>
                    <input type="text" name="city" id="city" required="required" /><span class="required">*</span></td>
            </tr>
            <tr>
                <th>State/Province</th>
                <td>
                    <input type="text" name="state" id="state" required="required" /><span class="required">*</span></td>
            </tr>
            <tr>
                <th>Postal Code</th>
                <td>
                    <input type="text" name="pcode" id="pcode" required="required" /><span class="required">*</span></td>
            </tr>
            <tr>
                <th>Country</th>
                <td>
                    <select required="">
                        <option>Select Country</option>
                        <option>Canada</option>
                        <option>United States</option>
                    </select>
                    <span class="required">*</span>
                </td>
            </tr>
            <tr>
                <th>Phone</th>
                <td>
                    <input type="text" name="phoneno" id="phoneno" value="+" /><span class="required">*</span></td>
            </tr>

        </table>

    <div role="button" class="marginTop50 marginBottom">
        <input type="button" id="step3Back" value="Back" class="active" />
        <input type="submit" id="step3confirmNext" value="Next" class="active marginLeft50" />
    </div>
</form>

HTML DIV 2 with Form 2 (which also require the validation)

<div id="step4Content" role="Step4" class="marginLeft nodisplay">


<form>
    <h1>URL Configuration</h1>
    <div>
        <p>Please provide the URL in the field below:-</p>
        <p><input type="url" name="urlconf" id="urlconf" value="http://" required="required" /><span class="required">*</span></p>

    </div>
    <div role="button" class="marginTop50 marginBottom">
        <input type="button" id="step4Back" value="Back" class="active" />
        <input type="button" id="step4confirmNext" value="Next" class="active marginLeft50" />
    </div>
</form>

JQUERY I have used to show/hide the DIVs:

            $("#step3confirmNext").click(function () {
               $("#step3Content").addClass("nodisplay");
               $("#step4Content").removeClass("nodisplay");
        });

        $("#step4Back").click(function () {
            $("#step3Content").removeClass("nodisplay");
            $("#step4Content").addClass("nodisplay");
        });

        //Function for moving from Step 4 to Step 5 and back, on click of "Next" and Back Button 
        $("#step4confirmNext").click(function () {
            $("#step4Content").addClass("nodisplay");
            $("#step5Content").removeClass("nodisplay");
        });

        $("#step5Back").click(function () {
            $("#step4Content").removeClass("nodisplay");
            $("#step5Content").addClass("nodisplay");
        });

Can you guys please guide how I can add validation for this code.

Let me know if you require some more info. Thanks

Answer 1

If you have validation happening after you submit one of the forms, you can bind a submit to your "step3confirmNext" button.

Reference the form you want, and do a $(form).submit();

If you aren't validating after the submit, you can write your own validation in jquery, or send an ajax request and return validation parameters.

Found a jquery validator on google if you want to try that