PROGRAM VISUALBASIC

ASP.NET(VB.NET) MVCモデル入門~未入力項目をチェックする

未入力項目を赤色にしてメッセージを表示する方法

今回は、前回のプログラムに未入力項目チェックを追加します。
最終的には、下図のようなイメージになりますが、設定手順が複雑なので一つずつ、順番にやり方を解説します。

vbmvc8-1
実行結果

今回使うアノテーションとモデルの検証の詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

ViewModelにアノテーションのRequired属性を設定

まず、ViewModelにアノテーションのRequired属性を設定します。
Required属性は、プロパティを必須入力項目に指定します。
以下のように、アノテーションのRequired属性をプロパティの上に記述します。

ビューに検証エラーメッセージを表示

必須入力項目が未入力だった場合に、エラーメッセージを表示させるには、HTMLヘルパーのHtml.ValidationMessageFor()を使います。
Formの送信先を、HomeControllerのInput()メソッドにして、入力画面を再度表示させるようにします。

コントローラーに二つ目のInput()メソッドを作成

HomeControllerに、元々あったInput()メソッドとは別に、Submitボタンを押下した際に呼び出されるInput()メソッドを作成します。
二つ目のInput()メソッドには、入力した値を格納したViewModelが引数として渡されます。
また、同じ名前のメソッドがある場合、システムがどちらのメソッドを使うか判断できず、エラーとなります。
そのため、二つ目のInput()メソッドは、POSTでリクエストされたことを指定するために、メソッドの上に<HttpPost()>を記述します。
これは、分岐処理として使われるもので、同じ名前のメソッドが一つしかなければ、<HttpGet()>や<HttpPost()>を指定しなくても、リクエストがGETでもPOSTでもメソッドは呼び出されます。
13行目のModelState.IsValidは、渡されたViewModelの状態を確認しています。
これは、ViewModelの状態が有効であればTrue、それ以外の場合はFalseを返します。
13行目から16行目は、ViewModelの状態が正しくなければInputビューに戻り、正しければIndexビューを呼び出すという処理になります。

デフォルトの<Required()>のメッセージ

上記までの内容で、プログラムを実行させてみましょう。
入力項目に何も指定しない場合は、下図のようなエラーメッセージが表示されます。

vbmvc8-2
実行結果

エラーメッセージはデフォルトで、「<DisplayName()>で指定した値」+「フィールドが必要です。」が表示されます。
エラーメッセージを変更するには、Required属性を以下のようにします。

<Required(ErrorMessage:="〇〇")>

「"〇〇"」の部分にメッセージを記述します。
また、<DisplayName()>で指定した値を表示するには、「{0}」と記述します。
本記事の最初に提示したサンプルのようなメッセージにするには、以下のようになります。

<Required(ErrorMessage:="{0}が未入力")>

プログラムを実行すると、下図のように指定したエラーメッセージになります。

vbmvc8-3
実行結果

未入力項目とメッセージを赤色にする

未入力項目とメッセージを赤色にするには、スタイルシート(Site.css)に以下のクラスを追加します。
HTMLヘルパーにより、自動的にクラスがタグに設定されます。

クラス名内容
field-validation-errorエラー発生時に、HTMLヘルパーのValidationMessageFor()メソッドが自動的に設定
input-validation-errorエラー発生時に、HTMLヘルパーのTextBoxFor()メソッドなどが自動的に設定

今回は、エラーメッセージをred、未入力項目をlightpinkにしています。

以上で、必須項目が未入力だった場合に、エラーメッセージを表示し、エラーメッセージと入力ボックスを赤色にする手順は終了です。

-PROGRAM, VISUALBASIC
-, , ,