BlazorでのWebアプリケーション開発手法２【C#】C02_ValidationSummary

前回のレクチャーで、入力必須チェックとエラーメッセージの表示ができるようになりました。今回はそのエラーメッセージを表示している「ValidationSummary」タグについて、配置場所を変えるとどうなるかを確認していきます。

図1 前回作成した状態。保存ボタンを押すとエリア名称の下にエラーメッセージが表示される

ValidationSummaryタグの現在の位置

エラーメッセージが表示されている場所は、EditForm内に配置している「ValidationSummary」タグの位置に対応しています。現在のコードでは、保存ボタンの後、EditFormの閉じタグの直前に配置されています。

図2 現在のHome.razorの構成。ValidationSummaryは保存ボタンの後（EditFormの末尾）に配置されている

ValidationSummaryを一番上に移動する

試しに、ValidationSummaryタグをDataAnnotationsValidatorの直後、つまりフォームの一番上に移動してみます。

<EditForm Model="@this" OnValidSubmit="@Save">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="mb-3">
        <label>エリア名称</label>
        <input type="text" @bind="AreaName" />
    </div>
 
    <div class="mb-3">
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</EditForm>

図3 ValidationSummaryをDataAnnotationsValidatorの直後（一番上）に移動

実行して保存ボタンを押すと、今度はエリア名称の入力欄の上にエラーメッセージが表示されるようになりました。

図4 実行結果。エラーメッセージがエリア名称の入力欄の上に表示される

入力欄と保存ボタンの間に移動する

次に、エリア名称の入力欄と保存ボタンの間にValidationSummaryを配置してみます。名称と保存の間にエラーメッセージを出したい場合は、ここに入れればよいことになります。

<div class="mb-3">
    <label>エリア名称</label>
    <input type="text" @bind="AreaName" />
</div>
 
<ValidationSummary />
 
<div class="mb-3">
    <button type="submit" class="btn btn-primary">保存</button>
</div>

図5 ValidationSummaryをエリア名称の入力欄と保存ボタンの間に移動

この状態で保存ボタンを押すと、狙いどおり入力欄と保存ボタンの間にエラーメッセージが表示されます。

図6 実行結果。エラーメッセージが入力欄と保存ボタンの間に表示される

元の位置に戻す

配置場所を確認できたので、ValidationSummaryタグは元どおり一番下（保存ボタンの後、EditFormの閉じタグの直前）に戻しておきます。

図7 ValidationSummaryを元の位置（一番下）に戻したところ

複数項目のエラーをまとめて表示する

ValidationSummaryは「Summary（集約）」という名前のとおり、チェック対象の項目が複数あっても、エラーメッセージは配置した一箇所にまとめて表示されます。これを確認するため、担当者（ManagerName）という項目を追加してみます。

エリア名称の入力欄をコピーして、ラベルを「担当者」、バインド先を「ManagerName」に変更した入力欄を追加します。

<div class="mb-3">
    <label>担当者</label>
    <input type="text" @bind="ManagerName" />
</div>

図8 エリア名称の入力欄をコピーして「担当者」欄を追加

@codeブロック側にも、AreaNameプロパティをコピーしてManagerNameプロパティを追加し、Required属性のエラーメッセージを「担当者を入れてください！！！」に変更します。

[Required(ErrorMessage = "担当者を入れてください！！！")]
public string ManagerName { get; private set; } = "";

図9 ManagerNameプロパティを追加し、Required属性のエラーメッセージを設定

実行して確認する

実行して、エリア名称・担当者ともに未入力のまま保存ボタンを押すと、2つのエラーメッセージが1箇所（ValidationSummaryを配置した場所）にまとめて表示されます。

図10 両方未入力で保存すると、2つのエラーメッセージが集約されて表示される

どちらか一方だけ入力されている場合は、入力されていない項目のエラーメッセージだけが表示されます。以下はエリア名称のみ入力し、担当者を未入力のまま保存した例です。

図11 エリア名称のみ入力した状態で保存すると、担当者のエラーメッセージだけが表示される

まとめ

ValidationSummaryタグは配置した場所にエラーメッセージが表示され、複数の入力項目でエラーが発生した場合でも、その場所に集約して一覧表示してくれます。フォームのデザインに合わせて、配置場所を自由に調整してみてください。