loading html into modal breaks stuff in jquery validation

Question

I have created a page that loads a partial view into a bootstrap modal (using jquery) when a link/button is clicked. However, doing this causes some undesired behavior that I need to fix.
The page is written like this:

<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>

And the partial view is :

@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>

and here is the javascript that loads the html into the modal:

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

also the model for the partial view is:

    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; }            
    }

when loading the page and opening the modal, the partial view loads fine and the data is passed to view without any problems (and validation data attributes are generated correctly). However when submitting the form with some invalid data the jquery validation does not work and the form submits. Calling $('#detailsform').valid() always results in a true value.

Abol_Fa · Accepted Answer · 2021-07-06 07:35:03Z

0

Found it.
I had to load validation scripts AFTER loading the html into the page. otherwise they won't work. I used

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

so the correct order is this:

Load HTML into element.
Include validation scripts using $.getScript('path/to/script.js');
Show Modal

answered Jul 6, 2021 at 7:35

Abol_Fa

1224 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

loading html into modal breaks stuff in jquery validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related