スポンサーリンク
はじめに
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を駆使しましょう。
0 件のコメント:
コメントを投稿