在bootsrap标签ASP

在bootsrap标签ASP

关注
发信
关注(28)粉丝(399)

在bootsrap标签ASP MVC jQuery验证导致不期望的回传

本文介绍了在bootsrap标签ASP MVC jQuery验证导致不期望的回传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有3 标签引导它的形式。 客户端验证正常工作时，其中验证错误出现的选项卡是开放的，提交按钮点击。然而，当我切换到一个标签，没有错误（具有其他标签错误时）在回来后发生，我也得到了正确的验证信息。

它的一个小问题，但回来后在这种情况下是不希望的，因为完整的客户端验证必须在发送请求给服务器之前完成。

我怎样才能纠正这种行为？

下面是我的HTML表单的副本：

  @model RBZPOSMVC.ViewModel.CreateEditItem
....
@using（Html.BeginForm（））
{
    @ Html.AntiForgeryToken（）    ＆LT; D​​IV 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; D​​IV CLASS =标签内容＆GT;
            ＆LT; D​​IV ID =详细信息类=标签窗格主动变脸＆GT;
                ＆LT; D​​IV CLASS =表单组＆GT;
                    @ Html.LabelFor（型号=＆GT; model.Item.Item code，htmlAttributes：新{@class =控制标签COL-MD-2}）
                    ＆LT; D​​IV 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; D​​IV CLASS =表单组＆GT;
                    @ Html.LabelFor（型号=＆GT; model.Item.ItemName，htmlAttributes：新{@class =控制标签COL-MD-2}）
                    ＆LT; D​​IV 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; D​​IV CLASS =隐藏＆GT;
                @for（VAR I = 0; I＆LT; Model.PriceGroupList.Count;我++）
                {
                    ＆LT; D​​IV 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; D​​IV 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; D​​IV ID =销售类=＆GT选项卡窗格中褪色;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV ID =购买级=＆GT选项卡窗格中褪色;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT; D​​IV CLASS =COL-MD-偏移2 COL-MD-10＆GT;
                ＆LT;输入类型=提交值=创建类=BTN BTN-默认的/＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
}＆LT; D​​IV＆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验证导致不期望的回传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 20:31
Powered by LMLPHP ©2024 在bootsrap标签ASP 0.040881