动态嵌入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));
        }
    }
});

局部视图包含已渲染的表单和JS逻辑，嵌入后出现异常：点击Bootstrap下拉框、Cancel按钮等所有带.btn类的元素时，都会触发表单验证；但预期仅在点击Save按钮时，通过手动调用.valid()触发验证。静态页面中表单验证正常，仅动态嵌入时出现该问题，且已使用$.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>

1. 修正表单选择器错误 #

局部视图中表单ID为user1Form，但JS代码中使用的是#userForm，这会导致$.validator.unobtrusive.parse()未正确解析目标表单，引发异常事件绑定。先修正选择器：

$(document).ready(function () {
    // 修正为实际的表单ID
    $.validator.unobtrusive.parse("#user1Form");
    initCountries();
    openUserModal();
});

$('#userModalButton').click(function (e) {
    // 同步修正表单选择器
    if ($("#user1Form").valid()) {
        // ... 提交逻辑
    }
});

2. 关闭自动触发的验证规则 #

jQuery Unobtrusive Validation默认会给表单内的.btn元素绑定自动验证触发事件，动态嵌入时可能因事件委托范围异常导致误触发。可以修改全局验证配置，关闭自动触发，仅保留手动调用.valid()的触发方式：

// 在解析表单前修改全局配置
$.validator.setDefaults({
    onfocusout: false,
    onkeyup: false,
    onclick: false
});

// 再解析目标表单
$.validator.unobtrusive.parse("#user1Form");

3. 为非提交按钮添加formnovalidate属性 #

对于Cancel这类不需要触发表单验证的按钮，添加formnovalidate属性，明确告知浏览器跳过验证：

<button type="button" class="btn cl-modal-button" data-dismiss="modal" formnovalidate>Cancel</button>

4. 手动移除非提交按钮的验证事件 #

如果上述方法无效，可在嵌入局部视图后，手动移除非Save按钮的验证相关事件：

// 嵌入成功后执行事件移除操作
$("#contentContainer").empty().append($(data)).then(function() {
    // 移除所有非Save按钮的.btn元素的验证点击事件
    $(".btn:not(#userModalButton)").off("click.validation");
});

内容的提问来源于stack exchange，提问作者Spring Elk