如何驗證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'
        }),
      },
    });
});

這解釋了有關模態事件 。