ASP.NET MVC 3 開発入門 (18) - クライアントサイド検証を利用する

前回作成したコメントとタグの登録機能ですが、そのままではフォームが空っぽのままでもエラー表示がされずに処理が続行されてしまっていました。

今回はコントローラにまたがって処理を組んでいるので MVC 標準のエラー表示機能が使えませんが、MVC 2 からクライアントサイド検証がサポートされましたので、そちらを使って実装したいと思います。

既に ASP.NET MVC 3 ではクライアントサイド検証がデフォルトで有効になっていますが、スキャフォールディングでは Create と Edit アクション時にしか必要な JavaScript ファイルが読み込まれないようになっていますので、Details アクションのビューの上の方に以下のような script タグを追加しましょう。

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

この二つのファイルは jQuery のプラグインですので ASP.NET MVC 以外でも利用することができますが、ASP.NET MVC ではデータアノテーションを使ったエラー検証と深く統合されていますので、以下のように Web.config や HTML ヘルパーで有効・無効を切り替えるだけで簡単に利用することができるようになっています。

Web.config

<appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

HTML ヘルパー

@{
  // クライアントサイド検証を有効にする
  Html.EnableClientValidation();
  // 控え目な JavaScript を有効にする
  Html.EnableUnobtrusiveJavaScript();
}

ここで出てきた「控え目な JavaScript」とは非常に聞きなれない言葉ですが、HTML5 で定義されているカスタムデータ属性を利用してクライアントサイド検証を行うための設定になります。例えば、コメント登録のフォームのタグを見てみると、以下のように data-* という属性が付いていることが確認できます。

<div class="editor-label">
    <label for="Name">名前</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="フィールド 名前 は最大長が 64 の文字列である必要があります。" data-val-length-max="64" data-val-required="名前 フィールドが必要です。" id="Name" name="Name" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>

今までは HTML に大量の JavaScript コードを埋め込んできましたが、カスタムデータ属性を利用することで JavaScript と HTML の分離がある程度できるようになりました。今までと比べると JavaScript コードが控え目なので、このような名前がついているわけです。

これで控え目な JavaScript を利用したクライアントサイド検証の準備が完了したので、実際にブラウザで確認してみます。

フォームが空のまま「Create」ボタンを押すと、ちゃんと未入力であることを示すエラーメッセージが表示されました。ASP.NET MVC 3 が標準で対応しているデータアノテーション属性は殆ど控え目な JavaScript を利用したクライアントサイド検証に対応していますし、簡単に独自の検証属性を作成することも可能です。

独自の検証属性の作成に関しては ASP.NET MVC 3 で独自の検証属性を作成して、クライアントサイド検証を行う - しばやん雑記などを参照していただければと思います。

今回でビューの実装に関しての説明は終わりとなります。次回からは動作確認を行っていきたいと思います、お疲れ様でした。