Проверка Boostrap не работает на модальной?

Question

Я пытаюсь использовать загрузочную проверку на стороне клиента, как описано здесь: https://getbootstrap.com/docs/4.0/components/forms/#custom-styles

Единственная разница в том, что моя форма модальна. Кажется, что когда я нажимаю кнопку «Отправить», ничего не происходит ... проверка не запускается. Я думаю, что это связано с добавлением слушателя события к кнопке отправки ... но я понятия не имею, как это исправить. Я попытался переместить проверочный JS к событию «показано.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, и он работает как положено.