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

【问题标题】：Form Validation with multiple DIVs showing by show/hide functionality通过显示/隐藏功能显示多个 DIV 的表单验证
【发布时间】：2013-08-28 21:05:08
【问题描述】：

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

在这些 DIV 中，我什至无法使用 HTML 5 验证，因为当我单击提交按钮时，该特定 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");
        });

你们能否指导我如何为此代码添加验证。

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

【问题讨论】：

为每个表单添加一个 id，然后在每个显示/隐藏显示中相应地调用 $(form).submit。

标签： javascript jquery html validation

【解决方案1】：

如果您在提交其中一个表单后进行了验证，您可以将提交绑定到您的“step3confirmNext”按钮。

引用你想要的表格，然后执行 $(form).submit();

如果提交后不进行验证，可以在jquery中编写自己的验证，或者发送ajax请求并返回验证参数。

如果您想尝试，请在 Google 上找到 jquery validator

【讨论】：