在bootsrap标签ASP MVC jQuery验证导致不期望的回传 [英] ASP MVC jquery validation in bootsrap tabs causes an undesired postback
问题描述
我有3 标签引导它的形式。 客户端验证正常工作时，其中验证错误出现的选项卡是开放的，提交按钮点击。然而，当我切换到一个标签，没有错误（具有其他标签错误时）在回来后发生，我也得到了正确的验证信息。
它的一个小问题，但回来后在这种情况下是不希望的，因为完整的客户端验证必须在发送请求给服务器之前完成。
我怎样才能纠正这种行为？
下面是我的HTML表单的副本：
@model RBZPOSMVC.ViewModel.CreateEditItem
....
@using（Html.BeginForm（））
{
@ Html.AntiForgeryToken（） ＆LT; DIV CLASS =形横＆GT;
@ Html.ValidationSummary（真，新{@class =TEXT-危险}） ＆LT; UL类=净值资产净值的选项卡＆GT;
＆LT;李班=主动＆GT;＆LT;数据拨动=选项卡上的href =＃细节＆GT;项目详情及LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;数据拨动=选项卡上的href =＃销售＆GT;销售价组和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;数据拨动=选项卡上的href =＃购买＆GT;购买价组和LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT; ＆LT; DIV CLASS =标签内容＆GT;
＆LT; DIV ID =详细信息类=标签窗格主动变脸＆GT;
＆LT; DIV CLASS =表单组＆GT;
@ Html.LabelFor（型号=＆GT; model.Item.Item code，htmlAttributes：新{@class =控制标签COL-MD-2}）
＆LT; DIV CLASS =COL-MD-10＆GT;
@ Html.EditorFor（型号=＆GT; model.Item.Item code，新{htmlAttributes = {新@class =表格控}}）
@ Html.ValidationMessageFor（型号=＆GT; model.Item.Item code，新{@class =TEXT-危险}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =表单组＆GT;
@ Html.LabelFor（型号=＆GT; model.Item.ItemName，htmlAttributes：新{@class =控制标签COL-MD-2}）
＆LT; DIV CLASS =COL-MD-10＆GT;
@ Html.EditorFor（型号=＆GT; model.Item.ItemName，新{htmlAttributes = {新@class =表格控}}）
@ Html.ValidationMessageFor（型号=＆GT; model.Item.ItemName，新{@class =TEXT-危险}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
.... //更多表单控件
＆LT; / DIV＆GT;
＆LT; DIV CLASS =隐藏＆GT;
@for（VAR I = 0; I＆LT; Model.PriceGroupList.Count;我++）
{
＆LT; DIV CLASS =表单组ID =@ Model.PriceGroupList [I] .PriceGroupTypeId＆GT;
@ Html.HiddenFor（型号=＆GT; model.PriceGroupList [I] .PriceGroupId）
@ Html.LabelFor（型号=＆GT; model.PriceGroupList [I] .PriceGroupName，
Model.PriceGroupList [I] .PriceGroupName，
htmlAttributes：新{@class =控制标签COL-MD-2}）
＆LT; DIV CLASS =COL-MD-10＆GT;
@ Html.EditorFor（型号=＆GT; model.PriceGroupList [I]。价格，新{htmlAttributes = {新@class =表格控}}）
@ Html.ValidationMessageFor（型号=＆GT; model.PriceGroupList [I]。价格，新{@class =TEXT-危险}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
}
＆LT; / DIV＆GT;
＆LT; DIV ID =销售类=＆GT选项卡窗格中褪色;
＆LT; / DIV＆GT;
＆LT; DIV ID =购买级=＆GT选项卡窗格中褪色;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV CLASS =COL-MD-偏移2 COL-MD-10＆GT;
＆LT;输入类型=提交值=创建类=BTN BTN-默认的/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
}＆LT; DIV＆GT;
@ Html.ActionLink（返回目录，索引）
＆LT; / DIV＆GT;@section脚本{
＆LT;脚本＆GT;
$ .validator.setDefaults（{
忽视：
}）;＆LT; / SCRIPT＆GT; @ Scripts.Render（〜/包/项目）
@ Scripts.Render（〜/包/ jqueryval）
}
既然你们两个选项卡，当您提交表单是隐藏的，你需要配置 $。验证验证隐藏要素（这是默认情况下不验证）。
您当前使用的 $ validator.setDefaults的（{忽略：}）; 不是的jQuery 2.2.0版本正确的（我相信使用已被取消$ p $ 1.9版本pciated），它必须是
$。validator.setDefaults（{
忽视： []
}）;
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: []
});
这篇关于在bootsrap标签ASP MVC jQuery验证导致不期望的回传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
