ASP.NET Core MVC のバリデーションでとりあえずそれっぽい見た目にする

ASP.NET Core MVC で、フォームの入力値検証でそれっぽい見た目だけをとりあえず作るメモ。

以下のようなクラスがある想定です。

using System.ComponentModel.DataAnnotations;

namespace WebApplication2.Models;

public class Product
{
    [Display(Name = "じゃんる")]
    [Required(ErrorMessage = "じゃんるを入れてください")]
    public string? Genre  { get; set; }
    [Range(0, 100000, ErrorMessage = "0-100000の間で入れてください")]
    [Display(Name = "ねだん")]
    public int Price { get; set; }
    [Required(ErrorMessage = "たいとるを入れてください")]
    [StringLength(20, ErrorMessage = "20 文字以内で入力してください")]
    [Display(Name = "たいとる")]
    public string? Title { get; set; }
}

この Product クラスを Model プロパティに設定されている状態で以下のようなフォームを定義して

@model Product
@{
    ViewData["Title"] = "Home Page";
}

<h2>@ViewData["Title"]</h2>

<form method="post">
    <div class="mb-3">
        <label asp-for="Genre" class="form-label"></label>
        <input asp-for="Genre" class="form-control" />
        <div class="invalid-feedback" style="display: block;">
            <span asp-validation-for="Genre"></span>
        </div>
    </div>
    <div class="mb-3">
        <label asp-for="Price" class="form-label"></label>
        <input asp-for="Price" class="form-control" />
        <div class="invalid-feedback" style="display: block;">
            <span asp-validation-for="Price"></span>
        </div>
    </div>
    <div class="mb-3">
        <label asp-for="Title" class="form-label"></label>
        <input asp-for="Title" class="form-control" />
        <div class="invalid-feedback" style="display: block;">
            <span asp-validation-for="Title"></span>
        </div>
    </div>
    <button type="submit" asp-action="Index" class="btn btn-primary">Submit</button>
</form>

css に以下のようなスタイルを追加すると

.input-validation-error {
    border-color: red;
}

初期状態はこんな雰囲気になって

入力値の検証エラーがあると以下のように表示されるようになります。

とりあえずそれっぽい見た目が出来た。