通过显示/隐藏功能显示多个DIV的表单验证

我的页面中有多个div，它们通过显示/隐藏功能逐一显示。其中两个DIV包含需要验证的Form。

在这些DIV中，我甚至无法使用HTML5验证，因为当我单击提交按钮时，特定的DIV会隐藏，下一个DIV会显示。

所以基本上，在下一个DIV出现之前，第一个DIV必须显示所需的验证。

请找到下面提到的我的代码：-

HTML DIV 1与表单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和Form 2（也需要验证）

<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我曾经显示/隐藏DIV：

            $("#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");
        });

你们能指导我如何为这个代码添加验证吗。

如果你需要更多信息，请告诉我。感谢