ASP.NET Core MVC クライアント検証に関するメモ

環境

ASP.NET Core2.1 MVC

デフォルトで使用されている検証用プラグイン・ライブラリ

・jQuery Validation Plugin
・jquery-validation-unobtrusive　←　MicrosoftのOSS

ライブラリの読み込み設定箇所
Views/Shared/_ValidationScriptsPartial.cshtml

使い方

view.cshtml

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

表示メッセージの上書き

view.cshtml

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<!--　上記より後に書くことで、エラーメッセージの上書きができる -->
<script>
    jQuery.extend(jQuery.validator.messages, {
        number: "数字を入力してください。",
        min: "1以上を入力してください。",   // ← <input type="number" min="1">のメッセージを上書きできる。
    });
</script>

要素の動的追加後の検証有効化

$("form").removeData("validator")    // Added by jQuery Validate
    .removeData("unobtrusiveValidation");   // Added by jQuery Unobtrusive Validation

$.validator.unobtrusive.parse($("form"));

検証の実行

$("form").validate().form();

エラーがあるか確認

if ($("form").validate().errorList.length == 0) {
    // エラーなし
}else{
    // エラーあり
}

カスタム検証実装

基本的にはこのサイトを見れば全て書いてある。

よく使いそうなものを抜粋

1. [Remote]属性を使う
   使い方：プロパティに[Remote]属性（アノテーション）を追加して検証可能。
   特徴：検証する際にサーバー(指定時のController)と通信を行う。DBの値と入力内容を比較する際に便利。
   注意点：クライアント側でしか処理が実行されないので、サーバーでは再度処理を実装する必要がある。

2. カスタム属性を使う
   使い方：プロパティに独自の属性（アノテーション）を追加して検証可能。
   特徴：新規でclassを作成しないといけないので、DBとの内容チェックは適していない気がする。クライアントとサーバー両方で検証が行われる。サーバーでの検証はpostされた際に他の検証と一緒に検証される。
   注意点：クライアント側での検証は、一度サーバーでの検証が実行されないと有効にならないような気がする。

3. カスタムクライアント側検証を使う
   使い方：クライアント側にjavascriptのコードを追加する。
   特徴：クライアント側だけに検証を追加したい際に便利。