如何用jQuery将已有文本输入框加入动态创建的表单？

我明白你遇到的困扰：那个独立于表单的静态输入框，想通过form属性关联到popover里动态生成的表单，但验证始终不生效。核心问题出在时机不对——你设置form属性的时候，目标表单还没被插入到DOM中，浏览器无法建立输入框和表单的关联，Bootstrap的验证机制自然也识别不到它。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：调整顺序，先插入表单再绑定form属性 #

这是最直接的修复方式，把设置form属性的代码移到表单插入到popover之后，确保表单已经存在于DOM中：

修改你AJAX成功回调里的代码顺序：

success: function ( queried_data ) {
    let options = $.parseJSON( queried_data ).shortcode_options;
    let id_number = 100;
    let form_id = 'popover_form_' + id_number;
    let checkbox_id = 'gdpr_terms_' + id_number;

    // 第一步：先把表单插入到popover body里
    popover_body.html( '<div><p class="text-justify px-1">' + declaration + '</p></div>' + 
        '<form class="needs-validation" id="' + form_id + '" novalidate>' +
            '<div class="form-group text-justify px-1">' +
                '<label class="custom-control custom-checkbox">' +
                    '<input type="checkbox" class="custom-control-input" id="' + checkbox_id + '" name="gdpr_terms" required>' +
                    '<span class="custom-control-label font-italic" for="gdpr_terms"> ' + options.checkbox_label + '</span>' +
                    '<div class="invalid-feedback">' + __( 'Devi accettare prima di poter proseguire.', 'ccwhatsapp' ) + '</div>' +
                '</label>' +
            '</div>' +
            '<div class="d-flex justify-content-center mt-2">' +
                '<button type="submit" class="btn btn-primary btn-sm">' + __( 'Avvia conversazione', 'ccwhatsapp' ) + '</button>' +
            '</div>' +
        '</form>' 
    );

    // 第二步：现在表单已经在DOM里了，给静态输入框设置form属性
    if ( shortcode === 'class_two_button' ) {
        const staticInput = $( '#input_' + id_number );
        staticInput.attr( 'form', form_id );
        // 给输入框添加required属性，确保原生验证生效
        staticInput.attr('required', true);
        // 如果没有错误提示元素，动态创建一个
        if (!staticInput.next('.invalid-feedback').length) {
            staticInput.after('<div class="invalid-feedback">此字段为必填项</div>');
        }
    }

    this_button.popover( 'update' );
},

方案2：手动在提交事件中验证静态输入框 #

如果方案1存在浏览器兼容性问题（比如部分浏览器对动态绑定的form属性支持不佳），可以在表单提交时手动检查输入框状态，同步验证样式：

修改你的表单提交事件处理代码：

$( '.container' ).on( 'submit', 'form.needs-validation', function( event ) {
    event.preventDefault(); // 先阻止默认提交
    event.stopPropagation();

    const form = $(this);
    let isValid = form[0].checkValidity();
    const staticInput = $( '#input_' + 100 );
    const checkbox = form.find( 'input[type="checkbox"]' );

    // 重置所有验证状态
    staticInput.removeClass('is-invalid');
    checkbox.removeClass('is-invalid');
    form.removeClass('was-validated');

    // 手动验证静态输入框
    if (staticInput.val().trim() === '') {
        isValid = false;
        staticInput.addClass('is-invalid');
    }

    // 验证复选框
    if (!checkbox.is(':checked')) {
        isValid = false;
        checkbox.addClass('is-invalid');
    }

    if (isValid) {
        // 验证通过，执行跳转操作
        const href = $( '#my_button_' + 100 ).data( 'href' );
        window.open( href, '_blank' );
        btn_with_popover.popover( 'hide' );
    } else {
        // 标记表单为已验证，显示错误样式
        form.addClass('was-validated');
    }
});

方案3：直接把静态输入框移到表单内部（推荐） #

如果这个输入框不需要留在原来的DOM位置，这是最稳妥的方式——直接把它移动到popover的表单里，这样Bootstrap验证会自动识别它，不需要额外处理：

在AJAX成功回调里，插入表单后执行移动操作：

success: function ( queried_data ) {
    // ... 其他代码保持不变 ...

    // 插入表单后，把静态输入框移动到表单的合适位置
    const form = $( '#' + form_id );
    // 示例：把输入框放在复选框所在的分组前面
    form.find('.form-group').prepend( $( '#input_' + id_number ) );

    this_button.popover( 'update' );
},

这样输入框就完全属于表单的一部分，Bootstrap的验证会自动包含它，不需要form属性，也不会有兼容性问题。

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