jQuery form validation after embedding Html with JS

Question

I have a website developed within ASP.NET Core MVC (.NET6) + jQuery, Bootstrap. Due to some restrictions, some navigation pages must be embedded dynamically by non-typical way using Ajax request.

$.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));
        }
    }
});

Some endpoints return partial views with already rendered HTML and JS code and this code embeds into pages after Ajax request using $("#contentContainer").empty().append($(data));

I need to validate the form and show validation outlines only after click on "Create" button, but validation is triggered even after a click on a bootstrap select element or "Cancel" button. I've already set all necessary options to the validator as default.

The thing is that if the code is originally on the page and doesn't integrate dynamically, form validation works as designed. But if I embed the same code using .append() and $.validator.unobtrusive.parse(), I have unexpected form validation after bootstrap select click or any button click. Descried issues appear only in case when rendered HTML and JS code was added dynamically using .append(). As a result, elements with .btn class trigger form validation: all buttons, bootstrap select element etc. I need to prohibit this unexpected form validation and validate only using.valid().

Does anybody have any thoughts how to fix that? Thanks in advance! P.S. I guess it's somehow related to the button element or .btn class.

Embedded code doesn't contain any special things except $.validator.unobtrusive.parse() and looks as usual.

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