使用 JS 嵌入 Html 后的 jQuery 表单验证

问：

我有一个在 ASP.NET Core MVC （.NET6） + jQuery，Bootstrap。由于某些限制，某些导航页面必须使用 Ajax 请求以非典型方式动态嵌入。

$.ajax({
    url: link,
    type: 'GET',
    dataType: 'html',
    headers: { 'X-Page-Request': 'true' },
    success: function (data) {
        var isFullPage = /<!DOCTYPE *html>/i.test(data);
        if (!isFullPage) {
            $("#contentContainer").empty().append($(data));
        }
    }
});

一些端点返回部分视图，其中包含已呈现的 HTML 和 JS 代码，并且此代码在 Ajax 请求后嵌入到页面中，使用$("#contentContainer").empty().append($(data));

我只需要在单击“创建”按钮后验证表单并显示验证大纲，但即使在单击引导选择元素或“取消”按钮后也会触发验证。我已经将验证器的所有必要选项设置为默认值。

问题是，如果代码最初在页面上并且没有动态集成，则表单验证将按设计工作。但是，如果我使用 和 嵌入相同的代码，则在引导选择单击或任何按钮单击后，我会遇到意外的表单验证。 仅当使用 动态添加呈现的 HTML 和 JS 代码时，才会出现描述的问题。因此，具有类触发表单验证的元素：所有按钮、引导选择元素等。我需要禁止这种意外的表单验证，并仅使用验证。.append()$.validator.unobtrusive.parse().append().btn.valid()

有人有什么想法如何解决这个问题吗？提前致谢！ P.S. 我想它与按钮元素或 .btn 类有某种关系。

嵌入式代码不包含任何特殊内容，除了看起来像往常一样。$.validator.unobtrusive.parse()

<div id="userModal" class="modal fade" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="cl-modal-body modal-body">
                <form class="form" id="user1Form">
                    <div class="row shift">
                        <div class="col-xs-12">
                            <div class="flex-align-center">
                                <label for="name" class="input-name-text-align-right input-name">* Name:</label>
                                <input for="name" class="form-control" id="userName" name="name" data-val="true" data-val-required="* This field is required." />
                            </div>
                        </div>
                    </div>
                    <div class="row shift">
                        <div class="col-xs-12">
                            <div class="flex-align-center">
                                <label for="countryId" class="input-name-text-align-right input-name">* Country:</label>
                                <select for="countryId" class="cl-select-form-control form-control" name="countryId" id="countryId1" data-val="true" data-val-required="* This field is required."></select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="cl-modal-footer">
                <button type="button" class="btn cl-modal-button" data-dismiss="modal">Cancel</button>
                <button type="button" id="userModalButton" class="btn btn-primary cl-modal-button">Save</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $.validator.unobtrusive.parse("#userForm");
        initCountries();
        openUserModal();
    });
    ...
    $('#userModalButton').click(function (e) {
        if ($("#userForm").valid()) {
            ...
        }
    });
    ...
</script>