フォームのセクションの検証

SixfootJames

フォームをdivに分割し、[次へ]ボタンを使用してそれらのセクションを購入して非表示にしました。また、jQuery検証プラグインを使用してすべての検証を行っています。

私が知る必要があるのは、セクションごとに検証する方法です。だからこれは私が持っているものです

  1. 個人情報
  2. 住所の詳細
  3. プロジェクト情報
  4. 規約と条件

2、3、および4はデフォルトで非表示になっているため、フォームの煩わしさが軽減されます。

個人情報の次のボタンをクリックすると、このdivが非表示になり、住所の詳細などが表示されます。

最後の画面にはフォームの送信ボタンがあり、フォーム全体を通常どおり検証しますが、ユーザーが先に進む前に各セクションを検証する必要があります。

これが私がうまくいくはずだと思ったものです:

CSS

   .project-address {display:none;}

HTML

   <form class="wpcf7">
      <div class="project-details">
        <h2>Project details</h2>
        <label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName">
      <div class="back-next"><span class="reg-next-button">Next</span></div>
      </div>
      <div class="project-address">
        <h2>Project address</h2>
        <label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress">
      <div class="back-next"><span class="reg-next-button">Next</span></div>
      </div>
    </form>

JQUERY

    //clicking the next button hides this section and shows the next section
    jQuery('.project-details .reg-next-button').click(function() {

        // jQuery(".project-details").slideUp();
        // jQuery('.project-address').slideDown();          

        jQuery('.reg-project-name').validate({
            debug: true,
            rules: {
                projectName: "required"
            },
            messages: {
                projectName: "Please give your project a name",
            }
            });

             });

編集:このような1つの要素を検証しようとしました。

       jQuery('.project-details .reg-next-button').click(function() {

        // jQuery(".project-details").slideUp();
        // jQuery('.project-funding').slideDown();          
        var validator = jQuery( ".wpcf7-form" ).validate();
        validator.element( ".reg-project-name" );

    });

編集: [次へ]ボタンをクリックした場合、次に進む前に、そのdivでフォーム要素を検証する必要がありますが、これは発生していません。つまり、フォーム要素は検証されていません。

何かご意見は?どうもありがとう。

スパークリー

まず、.validate()クリックハンドラーの内部をラップすることを忘れてください...それはそのようには機能しません。1つの問題は.validate()、フォームの有効性を「テスト」する方法はないということです。むしろ、フォーム上でプラグイン.validate()初期化するための唯一の方法です以降の呼び出しはすべて無視されるため、ページの読み込み時に1回実行します.validate()

jQuery Validateプラグインを使用し.valid()プログラムでフォームをテストするには、テストをトリガーしてブール値を返すメソッド使用ます。

マルチステップフォームを作成するときは、<form>セクションごとに一意のタグのセットを使用します。

次に.valid()、次のセクションに移動する前に、セクションをテストするために使用します。(最初にプラグインを初期化することを忘れないでください.validate()。DOM対応のすべてのフォームでを呼び出します。)

次に、最後のセクションで、.serialize()各フォームで使用し、送信するデータクエリ文字列にそれらを連結します。

このようなもの...

$(document).ready(function() {

    $('#form1').validate({
        // rules
    });

    $('#form2').validate({
        // rules
    });

    $('#form3').validate({
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    $('#gotoStep2').on('click', function() {
        if ($('#form1').valid()) {
            // code to reveal step 2
        }
    });

    $('#gotoStep3').on('click', function() {
        if ($('#form2').valid()) {
            // code to reveal step 3
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});

click上記のハンドラーはtype="submit"ボタンを使用していないことを覚えておくことが重要です。これらはタグまたはの外側にある通常のボタンです。formtype="button"

最後のフォームのボタンだけが通常のtype="submit"ボタンです。これは、プラグインの組み込みのsubmitHandlerコールバック関数を最後のフォームでのみ利用しているためです

「概念実証」デモ:http//jsfiddle.net/N9UpD/

また、参照用に参照してください。

https://stackoverflow.com/a/17975061/594235

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Symfony-コレクションフォームの複数の要素の検証

フォーム検証Laravelセッションデータ

Laravelフォームの検証の問題(セッションサイズの制限?)

jqueryアコーディオンフォームのすべてのセクションを検証するためのMVC4の取得

jqueryアコーディオンフォームのすべてのセクションを検証するためのMVC4の取得

「myApp」アプリケーションでのAngularJSフォームの検証。

オプションフィールドのAngular5フォーム検証

2つのモデルでのDjangoフォームの検証とアクション

レンダリングフォームと投稿フォームの別々のアクションでのYii2検証

Reactフォームでの条件付き入力オプション/検証

リアクティブフォームでオプションのFormControlを検証できません

Symfony-条件付きで埋め込まれたコレクションフォームの検証

フォーム上の複数の詳細セクション

エンティティのない覆瓦フォームのフォームコレクションは検証されません

Orbeonフォーム-繰り返しセクションフィールド検証

<フォーム>内の<セクション>

フォームセクションの複製

C#フォーム認証でのフォームCookieとセッションCookie

フォームを適切に検証する前にフォームアクションが呼び出されるのはなぜですか?

フォームの検証

新しいセッションの最初のフォーム送信でビューステートの検証に失敗しました

クライアントでのGrailsフォームの検証

PHP検証付きのシンプルなHTMLフォーム

jqueryバリデータフォーム:リモート電子メール検証の完了後にフォームアクションにアクセスする方法

フォームアクションは別のページ(phpコード)で、フォームを検証し、ビューページにエラーメッセージを表示する方法です

このフォーム検証スクリプトを、戻る前にフォームセクション全体でループさせるにはどうすればよいですか?

SpringBoot-フォームのカスタム検証アノテーションが機能しない

オプションのフィールドが含まれる検証フォームreact-hook-forms

Codeigniterフォームはオプションのフィールドを検証します

TOP 一覧

  1. 1

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  2. 2

    Railsで宝石のレイアウトを使用するにはどうすればよいですか?

  3. 3

    Chromeウェブアプリのウェブビューの高さの問題

  4. 4

    Ansibleで複数行のシェルスクリプトを実行する方法

  5. 5

    アンドロイド9 - キーストア例外android.os.ServiceSpecificException

  6. 6

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  7. 7

    CSSのみを使用して三角形のアニメーションを作成する方法

  8. 8

    Google Playストア:アプリページにリーダーボードと実績のアイコン/バッジが表示されない

  9. 9

    GoDaddyでのCKEditorとKCfinderの画像プレビュー

  10. 10

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  11. 11

    Windows 7では、一部のプログラムは「ビジュアルテーマを無効にする」レジストリ設定を行いませんか?

  12. 12

    Get-ADGroupMember:このリクエストのサイズ制限を超えました

  13. 13

    Pyusb can't find a device while libusb can

  14. 14

    MySQLでJSON_LENGTHとJSON_EXTRACTを組み合わせる方法は?

  15. 15

    Postmanを使用してファイル付きの(ネストされた)jsonオブジェクトを送信する

  16. 16

    Swiftのブロックのパラメーターに関するドキュメントのマークアップ形式は何ですか?

  17. 17

    Reactでclsxを使用する方法

  18. 18

    追加後、ブートストラップマルチセレクトがテーブルで機能しない

  19. 19

    MongoDB Compass: How to select Distinct Values of a Field

  20. 20

    「埋め込みブラウザのOAuthログイン」を有効にしてコールバックURLを指定した後でも、Facebookのコールバックエラーが発生する

  21. 21

    複数行ヘッダーのJTableヘッダーテキストの折り返し(カスタムTableCellRenderer)

ホットタグ

アーカイブ