0

ページに複数の DIV があり、表示/非表示機能を使用して 1 つずつ表示されています。Two DIVs には、検証が必要なフォームが含まれています。

これらの DIV では、送信ボタンをクリックすると、特定の DIV が非表示になり、次の DIV が表示されるため、HTML 5 検証を使用することさえできません。

したがって、基本的に、次の 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>

HTML DIV 2 with 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>

DIVの表示/非表示に使用したJQUERY：

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

このコードの検証を追加する方法を教えてください。

さらに情報が必要な場合はお知らせください。ありがとう

4

1 に答える 1

1

いずれかのフォームを送信した後に検証が行われる場合は、送信を「step3confirmNext」ボタンにバインドできます。

必要なフォームを参照して、 $(form).submit(); を実行します。

送信後に検証しない場合は、jquery で独自の検証を記述するか、ajax リクエストを送信して検証パラメーターを返すことができます。

試してみたい場合は、Googleでjqueryバリデーターを見つけました

于 2013-08-28T21:14:48.293 に答える