フォーム画面で、バリデーションと確認画面をjQueryによっておこなおうと考えております。

以下のオープンソースを使用します。

バリデーション
http://php-fan.org/sample_code_demo/validatorjquery.php
確認画面
http://blog.material-being.com/portfolio/auto_confirm/

それぞれ単独で使用すれば正常に機能するのですが、
以下のように同時に使用すると、

<form method="post" action="" class="validate autoConfirm">

</form>

バリデーションにエラーがあった場合でも確認画面が生成されてしまいます。
これをバリデーションにエラーがなかった場合のみ確認画面を生成させたいです。
つまり、class="validate"の実行後、入力に問題が無いと判断された場合だけ、class="autoConfirm"を実行させたいです。

このオープンソースのどの部分に変更を加えたら実現可能でしょうか。
ご教示頂けますと幸いです。

宜しくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/07/06 18:45:37
  • 終了:2014/07/08 20:48:50

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4524ベストアンサー獲得回数18802014/07/07 10:28:58

ポイント500pt

こんな感じに修正すると、期待している動作になると思います。

exvalidation.js の 246行目付近を、一行書き換え。

                // CustomBindCallBack
                if ( fnConfirmation(customBindCallback) ) {
                    customBindCallback();
                    return false;
                } else {
                    // customSubmit
                    if ( fnConfirmation(conf.customSubmit) ) {
//                      conf.customSubmit();    ★ 以下のように書き換えます
                        conf.customSubmit(form);
                        return false;
                    // Default Postback
                    } else {
                        // OK
                    }

autoConfirm.js の 54行目付近を、9行ほどコメントアウト。

    //まず現在のURLから入力画面か確認画面かを判断する
    if(location.hash == '#confirm') {
        switcher();
    }
    
//★ 以下の submit の辺りを、ばさっとコメントアウトします
//  $(formClass).submit(function() {
//      
//      if(location.hash != '#confirm') {
//          location.hash = '#confirm';         
//          return false;
//      }else{
//          return true;
//      }
//  });
//★ ここまで
    
    //---------------------------------
    // Backボタンが押されたらハッシュ値を削除
    //---------------------------------

そして、autoConfirm と exValidation を使うページでは、exValidtion の設定で、customSubmit を以下のように定義します。

    $("FORM.validate").exValidation({
        /* バリデーションのルール */
        rules: {
            name: "required",
            fish: "checkbox"
        },
        /* 他のオプションも、ご自由に */
        /* ★ customSubmit を以下のように設定します */
        customSubmit: function(f) {
            if(location.hash != '#confirm') {
                location.hash = '#confirm';         
                return false;
            }else{
                f.eq(0).each(function() {
                    this.submit()
                });
                return true;
            }
        }
        /* ★ ここまで */
    });

HTML は、質問に合わせました。

<form ... class="validate autoConfirm">
    ...
</form>
id:xptree

回答ありがとうございます。
見事にできました!
完璧な回答です。
わざわざソースを解読してくださりありがとうございました。
また何かありましたらお力添え頂けますと幸いです。

2014/07/08 20:47:17

その他の回答(1件)

id:pogpi No.1

POGPI回答回数377ベストアンサー獲得回数502014/07/07 06:19:15

validateと、autoConfirmを各々二ページ作って、autoConfirmに、validateページで入力した同じデータをフォームに設定して、onloadでjsを使ってsubmitをクリックさせると、できるかも知れません。

id:xptree

回答ありがとうございます。
ページは1ページ内で実現したいと思っています。

2014/07/08 20:48:28
id:a-kuma3 No.2

a-kuma3回答回数4524ベストアンサー獲得回数18802014/07/07 10:28:58ここでベストアンサー

ポイント500pt

こんな感じに修正すると、期待している動作になると思います。

exvalidation.js の 246行目付近を、一行書き換え。

                // CustomBindCallBack
                if ( fnConfirmation(customBindCallback) ) {
                    customBindCallback();
                    return false;
                } else {
                    // customSubmit
                    if ( fnConfirmation(conf.customSubmit) ) {
//                      conf.customSubmit();    ★ 以下のように書き換えます
                        conf.customSubmit(form);
                        return false;
                    // Default Postback
                    } else {
                        // OK
                    }

autoConfirm.js の 54行目付近を、9行ほどコメントアウト。

    //まず現在のURLから入力画面か確認画面かを判断する
    if(location.hash == '#confirm') {
        switcher();
    }
    
//★ 以下の submit の辺りを、ばさっとコメントアウトします
//  $(formClass).submit(function() {
//      
//      if(location.hash != '#confirm') {
//          location.hash = '#confirm';         
//          return false;
//      }else{
//          return true;
//      }
//  });
//★ ここまで
    
    //---------------------------------
    // Backボタンが押されたらハッシュ値を削除
    //---------------------------------

そして、autoConfirm と exValidation を使うページでは、exValidtion の設定で、customSubmit を以下のように定義します。

    $("FORM.validate").exValidation({
        /* バリデーションのルール */
        rules: {
            name: "required",
            fish: "checkbox"
        },
        /* 他のオプションも、ご自由に */
        /* ★ customSubmit を以下のように設定します */
        customSubmit: function(f) {
            if(location.hash != '#confirm') {
                location.hash = '#confirm';         
                return false;
            }else{
                f.eq(0).each(function() {
                    this.submit()
                });
                return true;
            }
        }
        /* ★ ここまで */
    });

HTML は、質問に合わせました。

<form ... class="validate autoConfirm">
    ...
</form>
id:xptree

回答ありがとうございます。
見事にできました!
完璧な回答です。
わざわざソースを解読してくださりありがとうございました。
また何かありましたらお力添え頂けますと幸いです。

2014/07/08 20:47:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません