jquery - 将 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值。

标签： jquerytwitter-bootstrapmodel-view-controllerunobtrusive-validationasp.net-mvc-partialview

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

问题描述

解决方案

推荐阅读