Q&A
>>turbgraphics200様
ご連絡が遅くなり、申し訳ございません。ご教示頂いた方法で解決出来ました！。
ありがとございます。
やりたいこと
入力フォームを作成し、ユーザに文章を記入してもらい登録をするWebページを作成しています。
その際に入力フォームに記入した文章のバリデート(空禁止、文字数制限)と、データを登録する際(フォームのボタンをクリック)に二重送信(２度押し出来ないボタン)を防止する機能を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」の機能によりエラーを出力してくれますが、その際に自作した二重送信防止スクリプトも動作してしまいボタンがクリック出来なくなります。
本来は以下のような制御を行いたいのですが、データのバリデートとフォームの二重送信機能の連携がうまくいきません。
- 登録フォームに入力されたデータをチェック。ルールに合わなければ、POST(ボタンを押せなくするorボタンを押しても弾かれる)出来ないようにする
↓
2. バリデートをクリアした場合にデータをPOSTする。POST中は二重送信できないようにボタンを押せなくする
特に「jQuery Validation Plugin」にはこだわりはないです。
もしよろしければ、皆様がどうやってデータのバリデートとフォームの二重送信機能の連携しているのご教示頂きたいです。
回答2件
0
jQuery Validation Plugin のvalid()を使用して、フォームがvalidなときだけボタンをdisabledにする、としてみてはいかがでしょうか。
投稿2017/03/01 01:50
総合スコア2019
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
総合スコア4267
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/03 07:17