将 html 加载到模态中会破坏 jquery 验证中的内容

问题描述

我创建了一个页面，当单击链接/按钮时，该页面将部分视图加载到引导模式（使用 jquery）中。但是，这样做会导致一些我需要修复的不良行为。
页面是这样写的：

<div class="modal animate__animated animate__fadeIn" id="editmodal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editmodaltitle">Modal title</h5>
                <button type="button" class="btn-close" onclick="ToggleModal('editmodal');" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="editmodalbody">
                ...
            </div>            
        </div>
    </div>
</div> 

部分视图是：

@model Data_Loggers.Areas.Admin.viewmodels.UserDetailsviewmodel
@{
    Layout = null;
}
<div class="col-auto form-group rounded-3 p-3">
    <form asp-controller="User" asp-action="Update" id="detailsform" method="post">
        @Html.AntiForgeryToken()

        <label asp-for="Username"></label>
        <input asp-for="Username" class="form-control" />

        <label asp-for="@Model.displayName"></label>
        <input asp-for="@Model.displayName" class="form-control" />

        <label asp-for="PhoneNumber"></label>
        <input asp-for="PhoneNumber" class="form-control" />

        <label asp-for="ExpirationDate"></label>
        <input asp-for="ExpirationDate" class="form-control" />

        <label asp-for="LockoutEnabled">محدودیت زمانی</label>
        <input asp-for="LockoutEnabled" type="checkBox" checked="@Model.LockoutEnabled" class="form-check-input" />
        <hr>
        <button type="submit" class="btn btn-primary" onclick="EditUser();">تایید</button>
        <div class="btn btn-danger">انصراف</div>

    </form>
    
</div>

这里是将 html 加载到模态中的 javascript：

function ReplaceContent(modalcontent) {
    let title = 'جزئیات کاربر ';
    $('#editmodalbody').html(modalcontent);
    SetModalTitle(title + $('#Username').val());    
    $('#editmodal').toggle();
    $('#detailsform').validate();
}

局部视图的模型是：

    public class UserDetailsviewmodel
    {
        public string Id{ get; set; }
        [display(Name = "نام کاربری")]
        [MinLength(3)]
        [required]
        public string Username{ get; set; }
        public string Password{ get; set; }
        [display(Name = "نام مستعار")]
        [MinLength(3)]
        [required]
        public string displayName{ get; set; }
        [display(Name = "تاریخ انقضا")]
        public string ExpirationDate{ get; set; }
        [display(Name = "دارای محدودیت زمانی")]
        public bool LockoutEnabled{ get; set; }
        [display(Name = "شماره تلفن")]
        public string PhoneNumber { get; set; }            
    }

加载页面并打开模态时，局部视图加载正常，数据传递给视图没有任何问题（并且验证数据属性生成正确）。但是，当提交带有一些无效数据的表单时，jquery 验证不起作用并且表单提交。调用 $('#detailsform').valid() 始终会产生 true 值。

解决方法

找到了。
我必须在将 html 加载到页面后加载验证脚本。否则他们将无法工作。我用过

$.getScript('path/to/script.js');

所以正确的顺序是这样的：

1. 将 HTML 加载到元素中。
2. 使用 $.getScript('path/to/script.js'); 包含验证脚本
3. 显示模态