How to use modal bootstrap in identity razor pages in ASP.NET Core

Question

I want to call the registration or login of individual Microsoft identity on the main page of my site using bootstrap modal. Everything goes well until the validations are applied and it is transferred from the modal page to a non-modal one and the validation calls

_Mainlayout in Shared folder:

<a class="model-btn" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fa fa-user-plus"></i></a>


    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Register</h5>
                    <a class="fa fa-window-close" data-bs-dismiss="modal" aria-label="Close"></a>
                </div>
                <div class="modal-body" id="register-modal">
                </div>
                
            </div>
        </div>
    </div>


    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript">
        function OnComplete() {
            $(".modal").modal("hide");
        }
        $(function () {
            $('a.model-btn').on('click', function () {
                $('.modal-body').load(`/Identity/Account/Register`);
            });
        })
    </script>

Register page in Areas/Identity/Pages/Account folder

@page

@model RegisterModel


@{
    ViewData["Title"] = "Register";
}

<div class="col-lg-12">
    <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="ajax-contact form-style6" data-ajax="true" data-ajax-update="register-modal" data-ajax-complete="OnComplete">
        <div class="form-group">
            <input type="email" asp-for="Input.Email" placeholder="[email protected]" />
            <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="password" asp-for="Input.Password" placeholder="password" />
            <span asp-validation-for="Input.Password" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="password" asp-for="Input.ConfirmPassword" placeholder="password" />
            <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
        </div>
        <button class="vs-btn" type="submit">Register</button>
        <p class="form-messages"></p>
    </form>
</div>

https://qawithexperts.com/article/asp-net/bootstrap-pop-up-modal-validation-in-aspnet-core-mvc/363

Modal form validation in asp.net core 2.1 and Razor pages