如何验证 Bootstrap 模式中的表单？答案

【问题标题】：How can I validate a form inside a Bootstrap modal?如何验证 Bootstrap 模式中的表单？
【发布时间】：2020-01-10 20:36:56
【问题描述】：

我有一个项目列表，每一行都有自己的“操作”按钮。其中一个操作是编辑记录，另一个显示相关记录的列表（通过 Ajax 调用动态加载），等等。当模态打开时，记录的相应 ID 也将传递给模态。

对于每一行，当用户单击按钮时，将出现一个 Bootstrap 模式，其中包含相应的内容（正如我所提到的，来自服务器的动态）。问题是，我无法验证表单以进行编辑或相关记录。这是我用于构建记录集的代码 sn-p：

      <a href="#"><span class="openRecordsModalBtn" id="7">Records</span></a>
      <a href="#"><span class="openEditModalBtn" id="7">Edit</span></a>

模态：

        <div class="modal fade" id="editModal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit record</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-lg" id="recordModal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Releted records</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> Close</button>
                </div>
            </div>
        </div>
    </div>

modal 的内容由 ajax 生成（它是一个简单的 HTML 表单）。这是我用于调用 Ajax 脚本并将记录 ID 传递给模式的 Javascript：

$(document).ready(function() {
    $('.openRecordsModalBtn').on('click',function(){
        var id = $(this).attr('id');
        $('.modal-body').load('/ajax/record.php?id=' + id, function(){
            $('#recordModal').modal({show:true});
        })
    })
});

$(document).ready(function() {
    $('.openEditModalBtn').on('click',function(){
        var id = $(this).attr('id');
        $('.modal-body').load('/ajax/edit.php?id=' + id, function(){
            $('#editModal').modal({show:true});
        })
    })
});

我的猜测是，到页面加载时，表单还没有生成。因此，无法进行验证。如何验证 Ajax 调用创建的表单？

这是验证函数：

document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
    document.getElementById('edit-form'),
    {
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'Please provide a name.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap(),
            submitButton: new FormValidation.plugins.SubmitButton(),
            defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            icon: new FormValidation.plugins.Icon({
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            }),
        },
    });
});

【问题讨论】：

你能显示你正在加载到编辑模式正文中的 html 或表单吗？
当您使用 ajax 呈现表单时。在完成表单的呈现后，我会考虑调用函数 validate_form。避免使用 DOMContentLoaded，因为表单还不存在

标签： javascript jquery ajax bootstrap-4 bootstrap-modal

【解决方案1】：

为什么要混合使用 JQuery 和 javascript？您应该只使用一个$(document).ready(function()。我相信要完成这项工作，您需要使用事件委托。尚未对此进行测试，但希望这样的方法对您有用。将document 替换为模态框最近的静态父元素。

$(document).on('shown.bs.modal', '#recordModal', '#editModal', function(e) {
  FormValidation.formValidation(
    document.getElementById('edit-form'), {
      fields: {
        name: {
          validators: {
            notEmpty: {
              message: 'Please provide a name.'
            }
          }
        }
      },
      plugins: {
        trigger: new FormValidation.plugins.Trigger(),
        bootstrap: new FormValidation.plugins.Bootstrap(),
        submitButton: new FormValidation.plugins.SubmitButton(),
        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
        icon: new FormValidation.plugins.Icon({
          valid: 'fa fa-check',
          invalid: 'fa fa-times',
          validating: 'fa fa-refresh'
        }),
      },
    });
});

这解释了modal events。

【讨论】：