如果存在验证错误,防止引导模式关闭
Posted
技术标签:
【中文标题】如果存在验证错误,防止引导模式关闭【英文标题】:Preventing A Bootstrap Modal From Closing If Validation Errors Exist 【发布时间】:2021-01-26 08:24:22 【问题描述】:我在 .NET MVC5 应用程序中有一个引导模型。我的客户端验证正在工作(在 MVC 中 jquery 不显眼),但问题是即使出现错误,我的模式也会继续关闭。如何防止模型关闭并仅显示错误?在我拥有的 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">×</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;
)
);
【问题讨论】:
【参考方案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">×</span>
</button>
</div>
<div class="modal-body">
<form id="frmSendMessage" method="get" action="https://***.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>
【讨论】:
以上是关于如果存在验证错误,防止引导模式关闭的主要内容,如果未能解决你的问题,请参考以下文章