ASP.NET Core MVCでモデルの検証エラー時の cssクラスを変更する

スポンサーリンク

はじめに

Coreを含めたASP.NET MVCには、必須入力チェックなどの単項目のチェックをモデルに設定した属性（アノテーション）だけで検証できる仕組みがある。

▪️参考リンク
https://docs.microsoft.com/ja-jp/aspnet/core/mvc/models/validation?view=aspnetcore-5.0

例えば、モデルの各プロパティに次のような属性を設定すると、コントローラーに処理が渡される直前にモデルの検証が行われ、Titleに対しては必須入力チェックと桁数チェックが行われ、ContactMailAddressについては入力された文字がメールアドレスの形式として正しいかを判定するチェックが行われる。

public class MyModel
{
    [Required]
    [StringLength(100)]
    public string Title { get; set; }
  
    [EmailAddress]
    public string ContactMailAddress { get; set; }
}

モデルの検証でエラーが発生した項目については、.cshtmlに次のように記述することで、モデルとバインドした該当のHTML要素とその下にエラーメッセージが表示される。

また、エラーが発生した項目の入力要素にはinput-validation-errorのCSSクラスが、asp-validation-for="xxx"で指定したエラーメッセージの<span>タグにはfield-validation-errorのCSSクラスが指定される。

<div class="form-group">
    <label asp-for="Title" class="control-label">TITLE</label>
    <input asp-for="Title" class="form-control" />
    <span asp-validation-for="Title"></span>
</div>
<div class="form-group">
    <label asp-for="ContactMailAddress" class="control-label">TITLE</label>
    <input asp-for="ContactMailAddress" class="form-control" />
    <span asp-validation-for="ContactMailAddress"></span>
</div>

エラー時に設定されるCSSクラス名を変更する

やっと本題ですが、モデルの検証エラーに出力されるinput-validation-errorやfield-validation-errorのCSSクラス名を変える方法を探っていきたい。

結論から言えば、ASP.NET Core MVCには、これらのクラス名を変更する手段が容易されていないため、単純に設定変更だけではクラス名を変更できなさそうだ。

というわけで、JavaScirptでinput-validation-errorやfield-validation-errorのCSSクラス名を置換してしまうのが、もっとも手軽で現実的な方法であろう。

<script type="text/javascript">
    $(document).ready(function(){
        $('.input-validation-error').addClass('my-valication-error').removeClass('input-validation-error');
        $('.field-validation-error').addClass('my-field-validation-error').removeClass('field-validation-error');
    });
</script>

スポンサーリンク

さいごに

正直、モデル検証エラー時のCSSクラス名は、デザインに関わるところなので、変更する手段を容易してほしかったが、ないようなのでJavaScriptを駆使しましょう。