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，它就可以工作。我创建了fiddle并修改了IIFE，它可以按预期工作。

Boostrap验证不适用于Modal吗？

1 个答案: