人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

フォーム画面で、バリデーションと確認画面を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"を実行させたいです。

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

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

●質問者: xptree
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pogpi
●0ポイント

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


xptreeさんのコメント
回答ありがとうございます。 ページは1ページ内で実現したいと思っています。

2 ● a-kuma3
●500ポイント ベストアンサー

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

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>

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ