提交时在客户端验证失败时关闭静态背景模式

Question

在提交表单之前，用户单击按钮打开“确认”模式。当在模式客户端验证中按下“应用”时，将触发并验证所有字段。到目前为止一切顺利，但如果验证失败，模态不会关闭，我不知道如何关闭。

我尝试将事件处理程序附加到提交按钮，然后调用 myModal.hide()，但没有任何反应。我怀疑其他 bootstrap js 代码有冲突，但我不知道该怎么办？

我曾尝试通过从模态背景中删除类来手动恢复 .show()，但最终我阻止了模态再次加载（在纠正验证错误后）

我正在使用 Bootstrap 5，测试版 3。

<form method="post">
    <div class="mb-1">
        <div class="form-floating pb-0">
            <input type="text" class="form-control" asp-for="Input.Title" placeholder="Title">
            <label asp-for="Input.Title">Event title</label>
        </div>
        <span asp-validation-for="Input.Title" class="text-danger"></span>
    </div>
    <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#confirmStaticModal">

    <div class="modal fade" id="confirmStaticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirmStaticModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmStaticModalLabel">Apply</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                    <input type="submit" class="btn btn-success" value="Apply" id="confirmApplicationButton" />
                </div>
            </div>
        </div>
    </div>
</form>

添加事件处理程序的 JS 代码

document.getElementById("confirmApplicationButton").addEventListener("click", (event) => {
    var modal = new bootstrap.Modal(document.getElementById("confirmStaticModal"));
    modal.hide();       
});

Answer 1

通过以这种方式使用 new bootstrap.Modal()，您将使用预先存在的 Bootstrap 模态中的元素创建一个额外的新 Bootstrap 模态。将两个不同的模式附加到相同的 HTML 元素会导致冲突。

获取对已创建模式的引用的正确方法是通过 .getInstance()，如：

var modal = bootstrap.Modal.getInstance(document.getElementById("confirmStaticModal"));

提交时在客户端验证失败时关闭静态背景模式

Close static backdrop modal on failed client-side validation when submitting

javascript

asp.net-core

bootstrap-modal

client-side-validation

bootstrap-5