为什么我的BootBox内元素无法访问、表单验证不生效？

我无法访问BootBox弹窗内的任意元素，尝试过重命名所有字段，但表单既不触发校验，也无法获取输入值：

我的BootBox代码（包含部分调试尝试）如下：

$(document).on("click", "#btnNew", function () {
    //$("#btnNew").click(function () {
        var form = $("#newSubjectCard").html();
        bootbox.dialog({
            message: form,
            title: "Add New Subject",
            buttons: {
                close: {
                    label: 'Cancel',
                    className: "btn btn-sm btn-danger",
                    callback: function () { }
                },
                success: {
                    label: "Add Subject",
                    className: "btn btn-sm btn-primary",
                    callback: function () {
                        if ($("#newSubjectName").val() == "" || $("#newSubjectEmail").val() == "") {
                            console.log($("#newSubjectName").val());
                            console.log($("#newSubjectEmail").val());
                            console.log("Fail");
                            
                            return false;  // 保持弹窗不关闭
                        } else {
                            //addCustomer();
                            console.log($("#newSubjectName").val());
                            console.log($("#newSubjectEmail").val());
                            //console.log("tried to submit");
                        }
                    }
                }
            }
        });

        $("#addCustomer").validate({
            // 定义校验规则
            rules: {
                newSubjectName: "required",
                newSubjectEmail: {
                    required: true,
                    email: true
                }
            },
            messages: {
                newSubjectName: "请输入姓名",
                newSubjectEmail: "请输入合法的邮箱地址"
            },
            submitHandler: function (form) {
                console.log("submitted");
            }
        });
    //});
})

我的Form表单代码如下：

<div id="newSubjectCard" class="d-none">
    <form id="addCustomer">
        <div class="form-row">
            <div class="col-auto">
                姓名:
                <input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
            </div>
        </div>
        <div class="form-row">
            <div class="col-auto">
                邮箱:
                <input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
            </div>
        </div>
        <div class="form-row">
            <div class="col-auto">
                分组:
                <input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
            </div>
        </div>
    </form>
</div>

我对着页面排查了很久毫无头绪，提前感谢大家的帮助！

更新 #

我已将表单代码直接写在JS中避免ID重复，问题已解决，感谢所有人的帮助。修复后的代码如下：

var form = `<div id="newSubjectCard">
                            <form id="addCustomer">
                                <div class="form-row">
                                    <div class="col-auto">
                                        姓名:
                                        <input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-auto">
                                        邮箱:
                                        <input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-auto">
                                        分组:
                                        <input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
                                    </div>
                                </div>
                            </form>
                        </div>`;
            bootbox.dialog({
                message: form,
                title: "Add New Subject",
                buttons: {
                    close: {
                        label: 'Cancel',
                        className: "btn btn-sm btn-danger",
                        callback: function () { }
                    },
                    success: {
                        label: "Add Subject",
                        className: "btn btn-sm btn-primary",
                        callback: function () {
                            if ($("#newSubjectName").val() == "" || $("#newSubjectEmail").val() == "") {
                                console.log($("#newSubjectName").val());
                                console.log($("#newSubjectEmail").val());
                                console.log("Fail");
                                $("#addCustomer").valid;

                                return false;  // 保持弹窗不关闭

                            } else {
                                //addCustomer();
                                console.log($("#newSubjectName").val());
                                console.log($("#newSubjectEmail").val());
                                //console.log("tried to submit");
                            }
                        }
                    }
                }

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