ASP MVC jquery 引导程序选项卡中的验证导致不需要的回发

Question

我有一个表格，里面有 3 个 bootstrap tabs。当出现 validation error 的选项卡打开并单击 submit button 时，Client Validation 可以正常工作。但是，当我切换到没有错误的选项卡时（而其他选项卡中有错误）出现 post back 并且我收到正确的验证消息。

这是一个小问题，但 post 在这种情况下不需要返回，因为在向服务器发送请求之前必须完成完整的客户端验证。

我该如何纠正这种行为？

下面是我的表格的副本 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")
}

Answer 1

由于您提交表单时隐藏了两个选项卡，因此您需要配置 $.validator 以验证隐藏元素（默认情况下不验证）。

您当前对 $.validator.setDefaults({ ignore: "" }); 的使用对于 jquery 版本 2.2.0 是不正确的（我认为该使用在版本 1.9 中已贬值）并且需要

$.validator.setDefaults({ 
    ignore: [] 
});

注意：不要在里面加上上面的$(document).ready()

ASP MVC jquery 引导程序选项卡中的验证导致不需要的回发

ASP MVC jquery validation in bootsrap tabs causes an undesired postback

asp.net-mvc

jquery-validation-engine

twitter-bootstrap-3