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

Question

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

对于每一行，当用户单击按钮时，将出现一个Bootstrap模式，其中包含各自的内容（如我所述，是从服务器动态生成的）。 问题是，我无法验证用于编辑或相关记录的表格。 这是我用于构建记录集的代码片段：

      <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>

模态的内容由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'
            }),
        },
    });
});

Answer 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'
        }),
      },
    });
});

这解释了有关模态事件 。