- 首页
- 其他开发
- 引导程序选项卡中的 ASP MVC jquery 验证会导致不希望的回发
引导程序选项卡中的 ASP MVC jquery 验证会导致不希望的回发
[英] ASP MVC jquery validation in bootsrap tabs causes an undesired postback
本文介绍了引导程序选项卡中的 ASP MVC jquery 验证会导致不希望的回发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含 3 个 bootstrap tabs 的表单.Client Validation 在发生 validation error 的选项卡打开并单击 submit button 时正常工作.但是，当我切换到没有错误的选项卡时(同时在其他选项卡中有错误)会发生 post back 并且我得到正确的验证消息.
这是一个小问题，但在这种情况下不需要回发，因为在向服务器发送请求之前必须完成完整的客户端验证.
我该如何纠正这种行为?
以下是我的表单 HTML 的副本:
@model RBZPOSMVC.ViewModel.CreateEditItem....@using (Html.BeginForm()){@Html.AntiForgeryToken()<div class="form-horizontal">@Html.ValidationSummary(true, "", new { @class = "text-danger" })<ul class="nav nav-tabs"><li class="active"><a data-toggle="tab" href="#Details">项目详情</a></li><li><a data-toggle="tab" href="#Sales">销售价格组</a></li><li><a data-toggle="tab" href="#Purchases">购买价格组</a></li><div class="tab-content"><div id="Details" class="tab-pane淡入活动"><div class="form-group">@Html.LabelFor(model => model.Item.ItemCode, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Item.ItemCode, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.Item.ItemCode, "", new { @class = "text-danger" })
<div class="form-group">@Html.LabelFor(model => model.Item.ItemName, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Item.ItemName, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.Item.ItemName, "", new { @class = "text-danger" })
....//更多表单控件
<div class="隐藏">@for (var i = 0; i < Model.PriceGroupList.Count; i++){<div class="form-group" id="@Model.PriceGroupList[i].PriceGroupTypeId">@Html.HiddenFor(model => model.PriceGroupList[i].PriceGroupId)@Html.LabelFor(model => model.PriceGroupList[i].PriceGroupName,模型.PriceGroupList[i].PriceGroupName,htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.PriceGroupList[i].Price, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.PriceGroupList[i].Price, "", new { @class = "text-danger" })
}
<div id="Sales" class="tab-pane淡入">
<div id="Purchases" class="tab-pane淡入">
<div class="form-group"><div class="col-md-offset-2 col-md-10"><input type="submit" value="Create" class="btn btn-default"/>
}<div>@Html.ActionLink("返回列表", "索引")
@section 脚本 {<脚本>$.validator.setDefaults({忽略: ""});@Scripts.Render("~/bundles/items")@Scripts.Render("~/bundles/jqueryval")}
解决方案
由于你提交表单时隐藏了两个选项卡，所以需要配置 $.validator 来验证隐藏元素(默认情况下未验证).
您当前使用的 $.validator.setDefaults({ ignore: "" }); 对于 jquery 2.2.0 版不正确(我相信该用法在 1.9 版中已折旧)并且它必须
$.validator.setDefaults({忽略: []});
注意:不要在$(document).ready()
中添加以上内容I have a form with 3 bootstrap tabs in it. Client Validation works correctly when the tab where the validation error occurs is open and submit button is clicked. However, when i switch to a tab with no errors (while having errors in other tabs) a post back occurs and i get the correct validation messages.
Its a minor issue, but post back is not desired in this situation, because full client side validation must be completed before sending request to the server.
How can i correct this behavior?
Below is a copy of my form HTML:
@model RBZPOSMVC.ViewModel.CreateEditItem
....
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Details">Item Details</a></li>
<li><a data-toggle="tab" href="#Sales">Sale Price Groups</a></li>
<li><a data-toggle="tab" href="#Purchases">Purchase Price Groups</a></li>
</ul>
<div class="tab-content">
<div id="Details" class="tab-pane fade in active">
<div class="form-group">
@Html.LabelFor(model => model.Item.ItemCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Item.ItemCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Item.ItemCode, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Item.ItemName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Item.ItemName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Item.ItemName, "", new { @class = "text-danger" })
</div>
</div>
.... // more form controls
</div>
<div class="hidden">
@for (var i = 0; i < Model.PriceGroupList.Count; i++)
{
<div class="form-group" id="@Model.PriceGroupList[i].PriceGroupTypeId">
@Html.HiddenFor(model => model.PriceGroupList[i].PriceGroupId)
@Html.LabelFor(model => model.PriceGroupList[i].PriceGroupName,
Model.PriceGroupList[i].PriceGroupName,
htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.PriceGroupList[i].Price, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PriceGroupList[i].Price, "", new { @class = "text-danger" })
</div>
</div>
}
</div>
<div id="Sales" class="tab-pane fade in ">
</div>
<div id="Purchases" class="tab-pane fade in ">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
<script>
$.validator.setDefaults({
ignore: ""
});
</script>
@Scripts.Render("~/bundles/items")
@Scripts.Render("~/bundles/jqueryval")
}
解决方案
Since two of you tabs are hidden when you submit the form, you need to configure the $.validator to validate hidden elements (which are not validated by default).
You current use of $.validator.setDefaults({ ignore: "" }); is not correct for jquery version 2.2.0 (I believe that usage was depreciated in version 1.9) and it needs to be
$.validator.setDefaults({
ignore: []
});
Note: do not add the above inside $(document).ready()
这篇关于引导程序选项卡中的 ASP MVC jquery 验证会导致不希望的回发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
