Question

我的页面中有多个DIV，通过使用show / hide功能逐个显示。其中两个DIV包含需要验证的表格。

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

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

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

表单1的HTML DIV 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>

带有表单2的HTML DIV 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");
        });

请大家指导我如何为此代码添加验证。

如果您需要更多信息，请与我们联系。感谢

Answer 1

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

引用您想要的表单，然后执行$（表单）.submit（）;

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

如果您想尝试

，请在Google上找到jquery validator

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

1 个答案: