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

【问题标题】：loading html into modal breaks stuff in jquery validation将 html 加载到模态中会破坏 jquery 验证中的内容
【发布时间】：2021-09-15 16:32:22
【问题描述】：

我创建了一个页面，当单击链接/按钮时，该页面将部分视图加载到引导模式（使用 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 值。

【问题讨论】：

标签： jquery twitter-bootstrap model-view-controller unobtrusive-validation asp.net-mvc-partialview

【解决方案1】：

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

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

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

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

【讨论】：