When a user clicks on the "Apply" button after opening a "confirm" modal, client-side validation checks all fields. However, in case of failure, the modal does not close and I am struggling to find a solution.
I attempted to use an event handler on the submit button to call myModal.hide(), but it did not work. There might be a conflict with other Bootstrap js code, but I am unsure how to proceed.
I manually tried to revert .show() by removing classes from and modal-backdrop, which prevented the modal from loading again after fixing validation errors.
I am using Bootstrap 5 beta 3.
<form method="post">
<div class="mb-1">
<div class="form-floating pb-0">
<input type="text" class="form-control" asp-for="Input.Title" placeholder="Title">
<label asp-for="Input.Title">Event title</label>
</div>
<span asp-validation-for="Input.Title" class="text-danger"></span>
</div>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#confirmStaticModal">
<div class="modal fade" id="confirmStaticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirmStaticModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmStaticModalLabel">Apply</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-success" value="Apply" id="confirmApplicationButton" />
</div>
</div>
</div>
</div>
</form>
Add event handler using JavaScript:
document.getElementById("confirmApplicationButton").addEventListener("click", (event) => {
var modal = new bootstrap.Modal(document.getElementById("confirmStaticModal"));
modal.hide();
});