Topic: Modal Form Prevent Closing
Ian Dexter Mendoza Siñel
free
asked 6 years ago
Hi Team -
I have a modal form that opens and fires when a button is clicked.
The modal form is displayed as expected.
However, on the modal form, it contains an "ADD" button that saves the data into my database.
What I would like to happen is that, when there are invalid data like invalid dates and time and when the add button is clicked, a toastr will be shown and the modal would not close.
Currently, I can show the toastr but after that the modal closes. I tried "required" but still doesn't work.
Here is my code:
<div class="modal modal-child fade addNewRequestModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-modal-parent="#ViewDetailModal">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Add New Document</h4>
</div>
<div class="modal-body">
<label for="addDtDeadline" class="col-xs-2 col-form-label">Deadline:</label>
<div class="md-form form-group">
<i class="fa fa-calendar fa-sm prefix"></i>
<input type="datetime-local" id="addDtDeadline" required>
</div>
<label for="addDtCompanyName" class="col-xs-2 col-form-label">Company Name:</label>
<div class="md-form form-group">
<i class="fa fa-building prefix"></i>
<input type="text" id="addDtCompanyName">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-unique" onclick="addDocument()" data-dismiss="modal">Add</button>
<button type="button" class="btn btn-unique" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function addDocument()
{
var addDtDeadline = $("#addDtDeadline").val();
var companyName = $("#addDtCompanyName").val();
if (new Date(addDtDeadline)=="Invalid Date") {
toastr["warning"]("Invalid Deadline");
$("#addDtDeadline").focus();
}
}
</script>
Please help.
Thank you in advance.
Regards,
Ian
Add comment
Ian Dexter Mendoza Siñel
free
answered 6 years ago
Hi Rafat -
This solves my problem. It helps me a lot.
Thank you very much.
Best,
Ian
Rafał Rogulski
free
answered 6 years ago
Hi Ian,
The problem is in button, you have
data-dismiss="modal"
attribute wich close modal.
Remove this and add in else statement #('id_modal').modal('hide');
Regards
Rafał
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No