jQuery Validate でキー押下のたびに発生する検証実行を、検証メソッドごとに阻止する

先日2011年5月21日(土)に開催された CLR/H 第58回勉強会のライトニングトークで話した内容を再録。

jQuery Validate について

言わずと知れた、JavaScript ライブラリの大御所、jQuery。

その jQuery 上に構築された、Web の入力フォームの内容チェック ― 未入力ではないか? とか、文字数が10文字以内か? とかの、入力検証 ― を行うための JavaScript ライブラリが、jQuery Validate だ。

jQuery Validate 本体にはじめから備わっている検証処理のほか、当然と言えば当然だが、自前でゴリゴリ書いた JavaScript による検証ロジックも組み込める。

検証を実施するタイミング

この jQuery Validate、さすが賢くできている。

いったん form を送信（submit）するまでは、フォーカス喪失時 "のみ" 検証処理が走る。

しかし、いったん form 送信しかかって、検証にひっかかったあとは、その検証にひっかかった入力欄のキー押下のたびに検証処理が動くのだ。

これにより、form 送信するまではあまりうるさくないが、いちど入力検証にひっかかって送信失敗したあとは、キーをおすごと、ことごとに検証処理が走る。
つまり、検証をパスする入力をタイプした途端に入力エラーの表示が即時に消えるため、なかなか良いのである。

これが仇になることが...

しかし、この賢い動作が仇になることがある。

独自の検証処理で、AJAX コールバックによる検証（実際の検証ロジックはサーバー側で行われる）を行っている場合などだ。

すなわち、いちど入力検証に失敗するとそれ以後、キータイプごとに AJAX コールバックが発生するのだ。

Google 検索のサジェストなどは、まさしくキー押下ごとに AJAX コールしているので、必ずしも珍しい・悪いことではない。

しかし、自作の Web サイトでは、そのような怒濤の AJAX コールに耐えるようにできていないことも多い（データベース検索など、重いI/O処理が行われるなど）。

その結果、DoS 攻撃モドキになってしまうのだ。

オプションで無効化できるけど...

この、キー押下のたびに検証処理を実施する挙動は、バリデーションのセットアップ時に無効にできる。

jQuery Validate による検証機能を有効にするには、ページロード直後の初期化時に、

$("form").validate();

と、セレクタで選択した form 要素に対して検証機能をインストールする。
このときの validate メソッド呼び出し時の引数として、オプションをいろいろ指定できる。

そのオプション指定のひとつとして、"onkeyup" というプロパティ指定がある。
これを false に指定してやると、キー押下のたびの検証処理は行われなくなる（すなわち、フォーカス移動時と、form 送信時のみ検証処理を行うようになる）。

$("form").validate({ onkeyup:false });

しかしである。

やはり、未入力検証や文字数検証については、キー押下のたびに検証して、リアルタイムで入力エラー表示がすっと消えてくれると気持ちのいいものだ。

すなわち、jQuery Validate 全体としてキー押下時の検証を On か Off かするのではなく、検証処理に応じて、キー押下時は検証しないなどの振り分けができるとベストだ。

ソースを追え!

ということで、jQuery Validate のソースを追ってみた。

すると。

先に紹介した、オプション指定の onkeyup プロパティなのだが、指定を省略したときの既定値は true だと思いきや。

なんと、onkeyup プロパティには、キー押下時の検証処理呼び出し、すなわち JavaScript の関数が設定されていた
のだ。

さすがは動的言語たる JavaScript。

つまり、jQuery Validate が各種入力欄の keyup イベントをハンドルしていて、いざハンドラが呼び出されると、この、オプション指定の onkeyup プロパティを呼び出しているだけだったのだ。

とはいえ、このお陰で、自前のコードの注入が簡単になる。

検証機能のセットアップ時に、自前の JavaScript 関数を onkeyup プロパティに指定してしまえば良いのだ。

$("form").validate({ onkeyup:MyFunction });

function MyFunction(element) {
// ここでキー押下時の検証処理呼び出しを制御する。
}

自前の関数を注入できてしまえばもうこっちのもの。
どうとでも好きなように料理できる。

以降、詳細は割愛するが、これで、
1. 標準の未入力検証や文字数検証はいままでどおりキー押下のたびにリアルタイム判定しつつ、
2. 独自の AJAX コールバックをともなうカスタム検証処理はキー押下時には走らない、
という実装が可能になった。

なかなか奥が深い JavaScript である。