我正尝试使用此处记录的引导客户端验证: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">×</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);
});
答案 0 :(得分:0)
您要给您的最后<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,它可以按预期工作。