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

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

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

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

jQueryプラグイン

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

jQuery

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

解決済

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

iarik
iarik

総合スコア101

HTML5

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

jQueryプラグイン

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

jQuery

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

2回答

0評価

1クリップ

5288閲覧

投稿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」にはこだわりはないです。
もしよろしければ、皆様がどうやってデータのバリデートとフォームの二重送信機能の連携しているのご教示頂きたいです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

jQueryプラグイン

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

jQuery

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