ایجاد validation سمت کلاینت و سمت سرور در مودال

با سلام

بنده فرم لاگین سایتمو به صورت مودال نمایش میدهم، اما وقتی از ولیدیشن به صورت کد زیر استفاده می کنم، برای نمایش خطا شکل فرم به هم میریزه

<span asp-validation-for="UserName" class="text-danger"></span>

ممنون میشم راهنمایی بفرمایید

*ویرایش شد*

کدهای صفحه لاگین

@model websitebuilder.Models.ViewModels.LoginViewModel
@{
    Layout = null;
    ViewData["Title"] = "- ورود";
}

<form asp-controller="Account" asp-action="Login" method="post" asp-route-returnUrl="">

    <div class="modal-header" style="background-color:#22c383;">
        <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">ورود</h4>
    </div>
    <div class="modal-body">

        <div class="form-group">
            <label asp-for="UserName" class="control-label"></label>
            <input asp-for="UserName" class="form-control" />
            <span asp-validation-for="UserName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Password" class="control-label"></label>
            <input asp-for="Password" class="form-control" />
            <span asp-validation-for="Password" class="text-danger"></span>
        </div>

        <div class="form-group">
            <div class="checkbox">
                <label asp-for="RememberMe" class="control-label">
                    <input asp-for="RememberMe"/>
                    @Html.DisplayNameFor(m => m.RememberMe);
                </label>
                

            </div>
        </div>
    </div>
    <div class="modal-footer" style="text-align:left;">
        <button class="btn btn-default" type="button" data-dismiss="modal">انصراف</button>
        <button class="btn btn-success" type="submit">ورود</button>
    </div>
</form>

کدهای ویو مادل مربوط به صفحه لاگین

public class LoginViewModel
    {
        [Display(Name ="نام کاربری")]
        [Required(AllowEmptyStrings =false,ErrorMessage =PublicConst.EnterMessage)]
        public string UserName { get; set; }

        [Display(Name = "کلمه عبور")]
        [Required(AllowEmptyStrings = false, ErrorMessage = PublicConst.EnterMessage)]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        [Display(Name ="مرا به خاطر بسپار")]
        public bool RememberMe { get; set; }
    }

کدهای نمایش فرم لاگین در صفحه اصلی به صورت مودال

@{await Html.RenderPartialAsync("_Modal", new BootstrapModel { ID = "load-login", Size = ModalSize.Small });}

@section PanelScript{

    <script src="~/js/modal-js/login.js"></script>
}

این هم کدهای اکشن login

[HttpPost]
        public async Task<IActionResult> Login(LoginViewModel model, string returnUrl=null)
        {
            ViewData["returnUrl"] = returnUrl;
            if (ModelState.IsValid)
            {
                var result = await _signInManager.PasswordSignInAsync(model.UserName,
                    model.Password, model.RememberMe,lockoutOnFailure:false);
                if (result.Succeeded)
                {
                    // success login
                    var user = await _userManager.FindByNameAsync(model.UserName);
                    var userRole = _userManager.GetRolesAsync(user).Result.ToArray();
                    return RidirectToLocal(userRole, returnUrl);
                }
                {
                    //faild login
                }

            }
            return View(model);
        }