Preventing A Bootstrap Modal From Closing If Validation Errors Exist

Question

I have a bootstrap model in an .NET MVC5 app. My client side validation is working (jquery unobtrusive in MVC) but the problem is that my modal keeps closing even if there are errors. How can I prevent the model from closing and just display the errors? In the javascript that I have, it prevents the modal from closing but it doesn't show any of the errors. I can only seem to get it to show errors if the modal closes. I need it to stay open if there are validation errors.

Here is my html:

<div class="modal" id="createMessageModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            @using (Html.BeginForm("Dashboard", "App", null, FormMethod.Post, new { @id = "frmSendMessage", @name = "frmSendMessage" }))
            {
                <div class="modal-header">
                    <h5 class="modal-title">Send Message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <table>
                        <tbody>
                            <tr>
                                <th style="padding-bottom:15px">From:</th>
                                @Html.HiddenFor(model => model.messageSenderID)
                                <td style="padding-bottom:15px;">@ViewBag.Name</td>
                            </tr>
                            <tr>
                                <th style="padding-bottom:15px">To:</th>
                                <td style="width:100% !important; padding-bottom: 15px;">
                                    @Html.DropDownListFor(model => model.messageRecipientID, Model.messageRecipientsDropdown, "Select A Recipient", new { @id = "recipient", @name = "recipient", @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.messageRecipientID, "", new { @class = "text-danger" })
                                </td>
                            </tr>
                            <tr>
                                <th>Subject:</th>
                                <td style="width:100% !important">@Html.TextBoxFor(model => model.messageSubject, new { @class = "form-control", @name = "messageSubject", @id = "messageSubject" })</td>
                                <td>@Html.ValidationMessageFor(model => model.messageSubject, "", new { @class = "text-danger" })</td>
                            </tr>
                        </tbody>
                    </table>

                    <br />
                    @Html.TextAreaFor(model => model.messageBody, new { rows = "15", style = "resize:none; min-width:100%;", id = "messageBody", name = "messageBody" })
                    @Html.ValidationMessageFor(model => model.messageBody, "", new { @class = "text-danger" })
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Send Message</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                </div>
            }
        </div>
    </div>
</div>

This is my jquery:

$(document).ready(function() {
  $("#frmSendMessage").submit(function() {
    Recipient = $("input[name='recipient']").val();
    MessageSubject = $("input[name='messageSubject']").val();
    MessageBody = $("input[name='messageBody']").val();


    return false;
  })
});

Answer 1

In your case either there might be some other code interfering with your form submission/modal or the form is getting submitted somehow and reloading the same page. These are the only two reason I can think of.

Below is an example of doing validation from jquery using your code as base.

Its a simple search query submission to SO. You can see that modal remains open if search text is not entered.

Please note the comment inside $("#frmSendMessage").submit

 $(document).ready(function() { $("#frmSendMessage").submit(function() { var query = document.getElementById('myQuery'); if (query.value == "") { $('#vmsg').html("Please enter your search query") return false; //form will not submit and modal will remain open } return true; //form will get submitted and modal will close due to page being changed/reloaded }) });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal"> Show Form </button> <div id="formModal" class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form id="frmSendMessage" method="get" action="https://stackoverflow.com/search"> <input type="text" id="myQuery" name="q" placeholder="your search query here"> <div id="vmsg"></div> <button type="submit" name="button">Search Now</button> </form> </div> </div> </div> </div>