使用 (.reportValidity) 后打开 Bootstrap 模式的问题答案

【问题标题】：Problems opening Bootstrap Modal after using (.reportValidity)使用 (.reportValidity) 后打开 Bootstrap 模式的问题
【发布时间】：2019-08-25 15:52:38
【问题描述】：

我正在使用我认为是相对较新的 .reportValidity 函数来验证表单上的必填字段。这很好用，我想要实现的是在验证后我的引导程序Thank You Modal 打开。我已经从我的提交按钮中删除了 data-toggle="modal" data-target="#confirm-submit" 以阻止感谢模式在验证之前打开，我只是坚持使用 javascript 在验证后打开它。这是我的代码 -

用于验证 -

    <script>
    document.forms['formfield'].addEventListener('submit', function() {
    document.forms['formfield'].reportValidity();
    }, false);
    </script>

对于我的引导模式 -

    (function(){
    $('##confirm-submit').on('show.bs.modal', function(){
    var myModal = $(this);
    clearTimeout(myModal.data('hideInterval'));
    myModal.data('hideInterval', setTimeout(function(){
        myModal.modal('hide');
    }, 3000));
    });
    });

如何在验证之后而不是之前调用 Modal？

【问题讨论】：

#confirm-submit 的选择器有一个额外的#，这可能会破坏某些代码。
感谢 K.G 的回复，我确实尝试删除了一个，但没有任何区别。它在使用 2 # 验证之前有效。我在验证后很难调用它。

标签： javascript bootstrap-modal event-listener

【解决方案1】：

答案是我用定时模态将其复杂化了，我不需要，所以最终代码是 -

    <script>
    document.forms['formfield'].addEventListener('submit', function() {
    document.forms['formfield'].reportValidity();
    }, false);
    </script>
    <script>
    $('#formfield').on('submit', function(e){
    $('#confirm-submit').modal('show');
    });
    </script>

我还在表单名称标题标签中添加了 onsubmit="openModal()"。现在像梦一样工作。

【讨论】：