ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

ASP.NETMVC2モデルによる検証(3)クライアントサイド検証

ASP.NETMVC2モデルによる検証(1)検証属性
ASP.NETMVC2モデルによる検証(2)カスタム検証
に書いた検証は、すべてサーバー側で行われるものでした。

今度は、クライアント側で行うクライアントサイド検証です。
デフォルトの検証属性で指定した検証を、クライアント側で行います。
カスタム検証で独自に定義した検証ロジックを、このやり方でクライアント側で行うことはできません。

◆クライアントサイド検証の実装例
では、実装例です。まず、検証用スクリプトをページに追加します。
f:id:UnderSourceCode:20130504105700j:plain
検証に使用するスクリプトのファイルである"MicrosoftAjax.js"、"MicrosoftMvcValidation.js"を追加しています。
全ての画面に適用するため、マスターページのヘッダーに追加することが多いです。

次に検証を行うページ上で、EnableClientValidation HTML ヘルパー メソッドを呼び出します。
f:id:UnderSourceCode:20130504105714j:plain
BeginForm HTML ヘルパーを使用する前に呼び出すことに注意してください。

では、クライアントサイド検証を実行してみましょう。
イベント発生時に呼び出されるコントローラーのアクションに、ブレークポイントを設定します。
f:id:UnderSourceCode:20130504105728j:plain

エラーチェックを実行時・・・
f:id:UnderSourceCode:20130504105746j:plain
クライアントでエラーチェックが行われるため、先ほどのブレークポイントで止まる前にエラーメッセージが表示されます。

クライアントサイド検証を行うためのEnableClientValidation HTML ヘルパー メソッドをコメントアウトすると・・・
f:id:UnderSourceCode:20130504105759j:plain

今度はサーバー側でエラーチェックを行うため、ブレークポイントで止まります。
f:id:UnderSourceCode:20130504105810j:plain