ASP.NET MVC5でSelect2使用時にモデルのValidationを有効にする方法がわからなくて困っています。

Question

前提・実現したいこと

C#、ASP.NET MVC5でSelect2のオートコンプリートコンボボックスを使用していて、
モデルのValidationを有効にする方法がわからなくて困っています。

View、javascriptの動きとしては、Select2で変更したら、input hiddenの値を変更するようにしています。

ご教授をお願いします。

該当のソースコード

■ Model validation

[Required(ErrorMessage = "{0} は選択が必須です。")]　　　　　　　　　　// ←　有効にならない
[Range(1, int.MaxValue, ErrorMessage = "{0} は選択が必須です。")]　　　// ←　試してみたが有効にならない
[Display(Name = "分類")]
public int CategoryId { get; set; }

■ View

<div class="form-group">
    <label class="col-md-3">@Html.DisplayNameFor(model => model.CategoryId) <span style="color: orange;">[必須]</span></label>
        <div class="col-md-9">
            <!-- Select2 - Id : DisplayName) -->
            <select id="select2CategoryId"></select>
            @Html.HiddenFor(model => model.CategoryId)<br />
            <div>
                @Html.ValidationMessageFor(model => model.CategoryId)
            </div>
        </div>
    </div>
</div>

■ javascript

var categories = getCategories();

// select2CategoryId
var categoryId = $("#CategoryId").val();
var tempCategories = getSelect2Data(categories);
setSelect2("#select2CategoryId", tempCategories, true, false, false, "50%");
$("#select2CategoryId").val(categoryIdEnum).trigger("change");

$("#select2CategoryId").on("select2:select", function (e) {
    $("#CategoryId").val($(this).val());
});

$("#select2CategoryId").on("select2:unselecting", function (e) {
    $("#CategoryId").val(null);　// または0に変更
});

function getSelect2Data(data) {
    if (data) {
        if (Object.keys(data).length) {
            // select2 data形式に変換
            var array = [];
            $.each(data, function (key, value) {
                array.push({ id: key, text: value });
            });
            
            return array;
        }
    }

    return null;
}

function setSelect2(select2IdName, data, allowClear, disabled, tags, width) {
    $(select2IdName).select2({
        data: data,

        // Select2 option here
        allowClear: allowClear,         // Clear button, default : true
        disabled: disabled,             // Disabled(display only), default : false 
        placeholder: "-- 選択 --",      // Placeholder
        tags: tags,                     // Dynamic input, default : false
        width: width                    // 50% or 100%

        // Do not open when clicking "x"
    }).on("select2:unselecting", function (e) {
        $(this).data("state", "unselected");
    }).on("select2:open", function (e) {
        if ($(this).data("state") === "unselected") {
            $(this).removeData("state");
            var self = $(this);
            self.select2("close");
        }
    });
}

補足情報（FW/ツールのバージョンなど）

.NET Framework 4.7.2
C#、ASP.NET MVC5
Visual Studio Express 2012 for Web

Answer 1

回答の修正をします。

jQueryのvalidationがHiddenプロパティに対して有効になっていないため、下記のコードを
javascriptに追加することで有効になりました。

$.validator.setDefaults({ ignore: null });)

Comments

[退会済みユーザー]

以下の記事に書いてあることを試してみてはいかがですか？

Enable Unobtrusive JQuery Validation on Hidden Input Fields in ASP.NET MVC
https://www.radenkozec.com/enable-unobtrusive-jquery-validation-on-hidden-input-fields-in-asp-net-mvc/

[退会済みユーザー]

コメントありがとうございます。
下記のコードをjavascriptに記載することでhiddenプロパティの検証に対応可能になりました。

$.validator.setDefaults({ ignore: null });