bootrap选项卡中的ASP MVC jquery验证会导致意外的回发

Question

我有一张表格里面有3张bootstrap tabs.Client Validation当validation error发生的选项卡打开并submit button单击时,它可以正常工作.但是,当我切换到一个没有错误的选项卡(在其他选项卡中有错误)post back时,会出现a ,我得到正确的验证消息.

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

我该如何纠正这种行为？

下面是我的表单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()