【解決方法】ブートストラップのモーダル フォーム検証が select2 で機能しない

Index.cshtml から部分ビューを呼び出すブートストラップ モーダル フォームを使用しています。
Select2 を使用するまでは正常に動作します。 同じ部分ビューは Select2 なしでも正常に動作します。 同じ Select2 も同じ部分ビューで正常に動作します。

しかし、問題は、ブートストラップ、部分ビュー、Select2 などをすべて使用すると、モデルの検証が機能しないことです。

私が試したこと:

<pre> src="https://www.codeproject.com/lib/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<!--For modal form-->
<div id="modal-placeholder"></div>
<div class="modal fade" id="customer_model" tabindex="-1" role="dialog" aria-labelledby="customer_modelLabel"
     data-bs-backdrop="static" data-bs-keyboard="true" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" id="movableDialog" role="document">
        <div class="modal-content" style="background-color: white; color: black; width:800px; margin-left: auto; margin-right: auto">
            <div class="modal-header" style="background-color: #337ab7; color: white; cursor: move">
                @{
                    if (ViewBag.action == "Edit")
                    { <h6 class="modal-title text-center" id="customer_modelLabel">Update Customer</h6> }
                    else if (ViewBag.action == "Delete")
                    { <h6 class="modal-title" id="customer_modelLabel" style="color:darkorange">Shown Customer will be deleted.<br />Please confirm?</h6> }
                    else
                    { <h6 class="modal-title" id="customer_modelLabel" style="text-align:center;">Create New Customer</h6> }
                }
                @*<h4 class="modal-title" id="rawmaterialLabel" style="text-align:center">Create Raw Material</h4>*@
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="color:darkred">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="myForm" asp-action="Create" style="width:700px;">
                    <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                    <div class="form-group">
                        <div class="col-md-10">
                            <div class="form-inline" style="text-align:left;">
                                <label asp-for="CUST_CODE" class="control-label col-sm-4"></label>
                                <input asp-for="CUST_CODE" readonly class=" form-control col-md-4" style="color:darkgoldenrod; " />
                                <span asp-validation-for="CUST_CODE" class="text-danger"></span>
                            </div>
                            <div class="form-inline" style="margin-top:5px">
                                <label asp-for="CUST_NAME" class="control-label col-sm-4"></label>
                                <input asp-for="CUST_NAME" class=" form-control col-md-8" />
                                <span asp-validation-for="CUST_NAME" class="text-danger"></span>
                            </div>
                            <div class="form-inline" style="margin-top:5px">
                                <label asp-for="CUST_GROUP" class="control-label col-sm-4"></label>
                                <select asp-for="CUST_GROUP" style="width: 368px;" class="form-control col-md-8 select2-select" id="ddlCustGroup" name="CUST_GROUP" asp-items="@(new SelectList(ViewBag.CustGroup, "Value", "Text"))">
                                    <option value="">-Select Customer Group-</option>
                                </select>
                                <input type="hidden" name="CUST_GROUP" value="@Model.CUST_GROUP" />
                                <span asp-validation-for="CUST_GROUP" class="text-danger"></span>
                            </div>
          <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                @{
                    if (ViewBag.action == "Delete")
                    {
                        <button type="button" class="btn btn-primary" data-bs-save="modal">Delete</button>
                    }
                    else
                    {
                        <button type="button" class="btn btn-primary" data-bs-save="modal">Save</button>
                    }
                }
            </div>
        </div>
    </div>
</div>
<link href="~/lib/select2/css/select2.css" rel="stylesheet" />
<script src="~/lib/select2/js/select2.js"></script>

<script type="text/javascript">

    //$('#myForm').removeData("validator");
    //$('#myForm').removeData("unobtrusiveValidation");
    //$.validator.unobtrusive.parse('#myForm');

    //$("#myForm").validate({
    //    rules: {
    //        ddlCustGroup: "required"
    //    },
    //    messages: {
    //        ddlCustGroup: "Please select your region"
    //    }

    //});

            $(document).ready(function () {
            $('#ddlCustGroup').select2({
                dropdownParent: $('.modal-body')
            });
            $('#ddlCustGroup').attr("required", "required");
            $("body").on("change", "#ddlCustGroup", function () {
                $("#ddlCustGroup > option").removeAttr("selected");
                // $("#ddlCustGroup").trigger("change");// Trigger change to select 2
                $("input[name=CUST_GROUP]").val($(this).find("option:selected").text());
                $(this).valid();
                $('#ddlCustGroup').attr("required", "required");
            });

            //----Customer Region

            $('#ddlCustomers').select2({
                dropdownParent: $('.modal-body')
            });
            $("body").on("change", "#ddlCustomers", function () {
                $("input[name=CUST_REGN]").val($(this).find("option:selected").text());
                $(this).valid();
            });

            //----Customer Sales Organization

            $('#ddlSalesOrg').select2({
                dropdownParent: $('.modal-body')
            });

            $("body").on("change", "#ddlSalesOrg", function () {
                $("input[name=SALES_ORG]").val($(this).find("option:selected").text());
                $(this).valid();
            });

            //----Customer Inco-Terms
            $('#ddlInco').select2({
                dropdownParent: $('.modal-body')
            });
            $("body").on("change", "#ddlInco", function () {
                $("input[name=INCO_TERMS]").val($(this).find("option:selected").text());
                $(this).valid();
            });

            //----Customer Bill Currency
            $('#ddlCurrency').select2({
                dropdownParent: $('.modal-body')
            });
            $("body").on("change", "#ddlCurrency", function () {
                $("input[name=BILL_CURCY]").val($(this).find("option:selected").text());
                $(this).valid();
            });
        });
</script>