質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

6909閲覧

入力データのバリデートとフォームの二重送信防止機能の実装方法について

iarik

総合スコア101

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/03/01 01:20

編集2017/03/01 01:21

やりたいこと

入力フォームを作成し、ユーザに文章を記入してもらい登録をするWebページを作成しています。
その際に入力フォームに記入した文章のバリデート(空禁止、文字数制限)と、データを登録する際(フォームのボタンをクリック)に二重送信(2度押し出来ないボタン)を防止する機能をjqueryで作成したいです。

やってみたこと

バリデートにはjqueryのjQuery Validation Pluginプラグインを使い、二重送信防止機能はjqueryを自作しました。

二重送信防止機能は、一度ボタンをクリックするとボタンの属性を「disabled」に変更してクリックできなくするスクリプトです。

  • 作成したjquery
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> <style type="text/css"> label.error { color: red; } </style> <script> // データのバリデーション $('form').validate({ rules : { body: { required: true, maxlength: 200 } }, messages : { body: { 'required': '** 文章を入力してください **', 'maxlength': '** 200文字以下で入力して下さい **' } }, errorPlacement: function(error, element) { element.before( error ); } }); // 二重送信防止 $(document).ready(function() { // block $('form').on('submit', function(){ $(this).find('button[type="submit"]') .prop('disabled', true); }); }); </script>
  • 登録フォーム
<!DOCTYPE html> <html lang="ja"> <head> <省略> </head> <body> <form role="form" name="form" method="post"> <label>Solr Doc Body</label> <textarea name="body"></textarea> <button type="submit" class="btn btn-info" formaction="./regist">登録</button> </form> <script>上記に記載したjqueryを記載</script> </body> </html>

発生しているエラー

例えば、「jQuery Validation Plugin」で設定したルールを満たせない文章が登録フォームに入力されて「登録」ボタンを押下すると、「jQuery Validation Plugin」の機能によりエラーを出力してくれますが、その際に自作した二重送信防止スクリプトも動作してしまいボタンがクリック出来なくなります。

本来は以下のような制御を行いたいのですが、データのバリデートとフォームの二重送信機能の連携がうまくいきません。

  1. 登録フォームに入力されたデータをチェック。ルールに合わなければ、POST(ボタンを押せなくするorボタンを押しても弾かれる)出来ないようにする


2. バリデートをクリアした場合にデータをPOSTする。POST中は二重送信できないようにボタンを押せなくする

特に「jQuery Validation Plugin」にはこだわりはないです。
もしよろしければ、皆様がどうやってデータのバリデートとフォームの二重送信機能の連携しているのご教示頂きたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

jQuery Validation Plugin のvalid()を使用して、フォームがvalidなときだけボタンをdisabledにする、としてみてはいかがでしょうか。

.valid() | jQuery Validation Plugin

投稿2017/03/01 01:50

alg

総合スコア2019

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iarik

2017/03/03 07:17

>>alg様 ご連絡が遅くなり申し訳ございません。 ご教示ありがとございます。 今回はturbgraphics200様の方法で対応いたしましたが、alg様からご教示頂いた方法も大変参考になりました。ありがとございます。
guest

0

ベストアンサー

プラグイン側にsubmitHandlerというハンドラーがあるようですので、そのハンドラー内でdisabledにしてみては?

javascript

1submitHandler: function(form) { 2 $(this).find('button[type="submit"]').prop('disabled', true); 3 $(form).submit(); 4}

投稿2017/03/01 01:32

turbgraphics200

総合スコア4269

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iarik

2017/03/03 07:16

>>turbgraphics200様 ご連絡が遅くなり、申し訳ございません。ご教示頂いた方法で解決出来ました!。 ありがとございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問