クライアントサイド検証の実装
クライアントサイド検証は以下の手順で実装します。
- クライアントサイド検証ルールのコンテナとなるアダプター（JPNAndUSAOnlyValidator）の作成
- 作成したアダプターの登録
- ViewPage側で実行する検証スクリプトの記述
順に解説します。まずはクライアントサイド検証を行うアダプターの作成です。
クライアントサイド検証ルールのコンテナとなるアダプター（JPNAndUSAOnlyValidator）の作成
クライアントサイド検証を行うアダプターの役割は、属性で指定したエラーメッセージや、RangeAttributeなどで設定するパラメータの値などの検証ルールのコンテナです。記載は次のとおりです。
using System;
using System.Collections.Generic;
using System.Web.Mvc;
//（1）クラスの作成
public class JPNAndUSAOnlyValidator : DataAnnotationsModelValidator<JPNAndUSAOnlyAttribute>
{
string _message;
// パラメータがある場合はここにフィールド変数を定義
//（2）コンストラクタ
public JPNAndUSAOnlyValidator(ModelMetadata metadata, ControllerContext context, JPNAndUSAOnlyAttribute attribute)
: base(metadata, context, attribute) {
_message = attribute.ErrorMessage;
// パラメータがある場合はここで値を設定
}
//（3）クライアントへの検証メタデータの準備
public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
{
var rule = new ModelClientValidationRule
{
ErrorMessage = _message,
ValidationType = "jpnandusaonly"
};
return new[] { rule };
}
}
上記コードについて順に解説します。
（1）クラスの作成
その名のとおり、モデルの検証を行うDataAnnotationsModelValidatorクラスに対してJPNAndUSAOnlyAttributeクラスを指定し、JPNAndUSAOnlyValidatorクラスを生成します。
（2）コンストラクタ
コンストラクタは、DataAnnotationsModelValidatorのものを使います。パラメータは次のとおりです。
- モデルのメタデータ（metadata）
- モデルのコントローラーのコンテキスト（context）
- モデルの検証属性（attribute）
attribute.ErrorMessageメソッドでJPNAndUSAOnlyAttribute属性で指定されたエラーメッセージを取得し、アダプター内のフィールド変数_messageに設定しています。もし、カスタム属性にパラメータ指定が必要な場合は、フィールド変数を用意し、attribute.パラメータプロパティ名と記述することで値の取得と設定ができます。
（3）クライアントへの検証メタデータの準備
クライアントサイドに検証ルールを渡すGetClientValidationRulesメソッドをオーバーライドします（戻り値は、IEnumerable<ModelClientValidationRule>）。ModelClientValidationRuleクラスはJSON形式で検証ルールを渡すためのコンテナクラスです。
オーバーライドしたメソッド内ではJSON形式の変数を用意して返しているだけです。
JSONの値となるrule変数内に、ModelClientValidationRuleオブジェクトを格納しています（ErrorMessageプロパティにエラーメッセージを、ValidationTypeプロパティに検証の型を指定しています）。
以上がアダプターの作成です。続いて、作成したアダプターの登録を行います。
作成したアダプターの登録
クライアントサイドにアダプターの値を渡すためにはGlobal.asaxファイルのApplication_Startメソッドに登録が必要です。記載は次のとおりです。
using CodeZineMVC2.Models;
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RegisterRoutes(RouteTable.Routes);
DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(JPNAndUSAOnlyAttribute), typeof(JPNAndUSAOnlyValidator));
}
DataAnnotationsModelValidatorProviderクラスは、DataAnnotationを利用した検証を行うプロバイダを登録するクラスです。RegisterAdapterメソッドの第1パラメータに検証属性の型を、第2パラメータにアダプターの型を設定します。これでカスタム属性と、アダプターの登録は完了です。最後にクライアントサイドでのスクリプトの記載です。
ViewPage側で実行する検証スクリプトの記述
これまでの設定では、JSON形式のデータだけが渡されている状態なので、クライアントサイドの検証はできません。2度手間に感じるかもしれませんが、クライアントサイドでもサーバーサイドの属性同様の検証ロジックを記載することになります。まずは、MVC標準で提供されているライブラリのスクリプト記載例です。
<%-- MVC提供のスクリプトを使用する場合 --%>
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
<script type="text/javascript">
Sys.Mvc.ValidatorRegistry.validators["jpnandusaonly"] = function (rule) {
return function (value, context) {
if(value == false){
return true;
} else if (value == 'JPN' || value == 'USA') {
return true; /* 検証成功 */
}
else {
return rule.ErrorMessage; /* 検証エラー */
}
};
}
</script>
Sys.Mvc.ValidatorRegistry.validatorsメソッドは、アダプターで指定した検証の型を指定します。これにより検証ルール（本サンプルではエラーメッセージのみ）の取得が行われます。後は、JPNAndUSAOnlyAttributeと検証ロジック部分と同等の記述を行うだけです（検証エラー時にはエラーメッセージを返す）。
実行結果は図4のとおりです。
続いて、jQueryと、jQuery Validationを使用する場合の例です。記載は次のとおりです。
<%-- jQueryを使用する場合 --%>
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
jQuery.validator.addMethod("jpnandusaonly", function (value) {
if (value == false) {
return true;
} else if (value == 'JPN' || value == 'USA') {
return true; /* 検証成功 */
}
else {
return false; /* 検証エラー */
}
});
});
</script>
jQuery.validator.addMethodで、アダプターで指定した検証の型を追加しています。後は、前述のスクリプト同様です。こちらの実行結果も図4のようになります。
まとめ
今回は、MVC 1が苦手としていた検証部分を紹介しました。今回紹介したDataAnnotationを利用した検証はMVC 2アプリケーション開発の基本であり重要なポイントです。ユーザビリティの優れたサイトを構築するためにもクライアントサイド検証も含めて実装することを強くお勧めします。
また、最後に紹介したカスタムの検証属性を活用することで、検証の応用まで網羅できるため、本記事を参考にMVC 2における検証の足掛かりにしていただければ幸いです。
後編では非同期コントローラーや、jQuery Templateなどの活用について触れる予定です。お楽しみに。
