I am attempting to implement client-side validation using bootstrap, as outlined here: https://getbootstrap.com/docs/4.0/components/forms/#custom-styles
The challenge I'm facing is that my form is within a modal. When I click the submit button, nothing seems to happen - the validation doesn't trigger. It appears to be related to the event listener attached to the submit button, but I'm unsure how to resolve it. I even attempted moving the validation JavaScript to the 'shown.bs.modal' event of the modal with no success.
Any assistance in resolving this issue would be greatly appreciated!
Here is a snippet of my Form/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>
[Form Content Here]
</form>
</div>
</div>
</div>
My Attempt at Implementing Validation with JavaScript:
$(function () {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
alert("test");
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
});