如果存在驗證錯誤，則防止 Bootstrap 模式關閉

Question

我在 .NET MVC5 應用程序中有一個引導程序模型。 我的客戶端驗證正在工作（jquery 在 MVC 中不顯眼），但問題是即使出現錯誤，我的模態也會一直關閉。 如何防止模型關閉並僅顯示錯誤？ 在我擁有的 javascript 中，它會阻止模式關閉，但不會顯示任何錯誤。 如果模式關閉，我似乎只能讓它顯示錯誤。 如果出現驗證錯誤，我需要它保持打開狀態。

這是我的 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>

這是我的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

在您的情況下，可能有一些其他代碼干擾了您的表單提交/模式，或者表單以某種方式提交並重新加載同一頁面。 這是我能想到的唯一兩個原因。

下面是使用您的代碼作為基礎從 jquery 進行驗證的示例。

它是一個簡單的搜索查詢提交給 SO。 如果未輸入搜索文本，您可以看到模態保持打開狀態。

請注意$("#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>