Ian Dexter Mendoza Siñel free asked 5 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">&times;</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

Hi Rafat - This solves my problem. It helps me a lot. Thank you very much. Best, Ian

Rafał Rogulski free answered 5 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ł

Please insert min. 20 characters.

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