Boostrap驗證不適用於Modal？

Question

我正在嘗試使用此處記錄的引導程序客戶端驗證： https ： //getbootstrap.com/docs/4.0/components/forms/#custom-styles

唯一的區別是我的表格是模態的。 似乎當我單擊我的提交按鈕時，沒有任何反應......驗證不會被觸發。 我認為這與添加到提交按鈕的事件監聽器有關...但我不知道如何解決這個問題。 我嘗試將驗證JS移動到模態的'shown.bs.modal'事件但仍然沒有:(。

感謝您對此問題的任何幫助！

我的表格/模式：

<div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="add-modal" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Report</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="modal-body">
            <form class="needs-validation" id="add-report-form" novalidate>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="report-select">Report</label>
                            <select class="custom-select" id="report-select" name="report" required>
                                <option selected value="">None</option>
                                <option value="Revenue">Revenue</option>
                                <option value="Expenses">Expenses</option>
                                <option value="Overdue Invoices">Overdue Invoices</option>
                                <option value="Accounts Receivable Aging">Accounts Receivable Aging</option>
                            </select>
                            <div class="invalid-feedback">
                                Please select something.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row modal-row">
                    <div class="col">
                        <label for="interval-select">Report Interval</label>
                        <select class="form-control" id="interval-select" name="interval" required>
                            <option>Select Interval</option>
                            <option>Everyday</option>
                            <option>Last day of week</option>
                            <option>Last day of month</option>
                        </select>
                    </div>

                    <div class="col">
                        <label for="timing-select">Report Timing</label>
                        <select class="form-control" id="timing-select" name="timing" required>
                            <option>Select Timing</option>
                            <option>9am</option>
                            <option>5pm</option>
                            <option>9pm</option>
                            <option>Midnight</option>
                        </select>
                    </div>
                </div>

                <div class="row modal-row">
                    <div class="col">
                        <!-- <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input on-disabled-switch" id="switch" name="enabled">
                            <label class="custom-control-label" for="switch">Enable this report?</label>
                        </div> -->
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="add-check" name="enabled">
                            <label class="form-check-label" for="add-check">
                                Enable this report?
                            </label>
                        </div> 
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="submit" type="submit" class="btn btn-primary save-changes">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

我的JS：

$(function () {
    'use strict';
    window.addEventListener('load', function() {
        //get all forms that we want to apply custom bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        console.log("made it here " + forms.length);
        //loop over them to prevent submision
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                console.log("made it here 2");
                if (form.checkValidity() === false) {
                    alert("test");
                    event.preventDefault();
                    event.stopPropagation();
                }

                form.classList.add('was-validated');
            }, false);
        });
    }, false);
});

Answer 1

你給了你的最后一個<button>兩個type屬性（ type="button" type="submit")

<button type="button" id="submit" type="submit" class="btn btn-primary save-changes">Save changes</button>

只需刪除不必要的type=button就可以了。 我創建了一個小提琴並修改了IIFE，它按預期工作。