After trying to implement a success modal that shows up upon successful form validation using Bootstrap 4 and its JavaScript code, I made a slight modification. However, I am uncertain if this is the correct approach to handle it.
I believe there might be an issue with my event.showModal implementation.
<div class="row content">
<div class="container">
<div class="col">
<form id="form" class="needs-validation" novalidate>
<div class="form-group">
<label for="exampleInputEmail1">Your Name <em class="required">*</em></label>
<input type="Name" class="form-control" id="exampleInputName" aria-describedby="nameHelp" required>
<div class="invalid-feedback">
Please add your name
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Your Email <em class="required">*</em></label>
<input type="Email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required>
<div class="invalid-feedback">
Please add a valid email
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Label <em class="required">*</em></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required></textarea>
<div class="invalid-feedback">
Please add some details
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Anything else you want us to know? <em class="required">*</em></label>
<textarea class="form-control" id="exampleFormControlTextarea2" rows="6" required></textarea>
<div class="invalid-feedback">
Just do it…
</div>
</div>
<button type="submit" class="btn btn-primary btn-givi hvr-grow-shadow hvr-back-pulse">Submit</button>
</form>
</div>
<div id="success" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h1>Success</h1>
</div>
</div>
</div>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
else if (form.checkValidity() = true) {
event.showModal('#Sucess');
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();