Проверка jquery ASP MVC на вкладках начальной загрузки вызывает нежелательную обратную передачу

Question

У меня есть форма с 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">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()