ASP MVC的jQuery驗證在靴子標籤導致不希望的回發

我有一個3 bootstrap tabs在其中的表格。 Client Validation在出現validation error的選項卡打開並單擊submit button時正常工作。但是，當我切換到一個沒有錯誤的標籤（雖然在其他標籤中有錯誤），post back發生，我得到正確的驗證信息。ASP MVC的jQuery驗證在靴子標籤導致不希望的回發

這是一個小問題，但在這種情況下不需要回發，因爲在向服務器發送請求之前必須完成完整的客戶端驗證。

我該如何糾正這種行爲？

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

來源

2016-03-07 JustLearning

什麼都是包含在'「文件〜/bundles/jqueryval「'捆綁？ –

我正在使用一個標準的MVC模板，所以它有'jquery.validate.min.js'和'jquery.validate.unobtrusive.min.js'。基本上這個：'bundles.Add（新的ScriptBundle（「〜/ bundles/jqueryval」）。包括（「〜/ Scripts/jquery.validate *」））;' – JustLearning

既然你們兩個選項卡，當您提交表單是隱藏的，您需要將$.validator配置爲驗證隱藏要素（這是默認情況下不生效）。

您當前使用的$.validator.setDefaults({ ignore: "" });不是jQuery的2.2.0版本（我相信使用在1.9版本貶值），正確的，它需要

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

來源

2016-03-07 23:47:50

謝謝你的答案將檢查並取回 – JustLearning

取決於在bootstrap選項卡的版本上，您可能需要處理'shown'事件 - 例如（''shown'，function（e）{form.data（'validator'，null）; .....}）;' –

我的（數據切換=「選項卡」]'）。試過你的解決方案它沒有工作，我編輯的問題 – JustLearning

ASP MVC的jQuery驗證在靴子標籤導致不希望的回發

回答

相關問題