Kendo單選按鈕驗證在Tabstrip中不起作用

Question

我嘗試使用Kendo編寫一個向導表單，例如sample 。 我在模型中添加了新屬性“性別”，並在_RegistrationStep1.html中添加了兩個單選按鈕。如果我未選擇任何單選按鈕，則驗證不適用於性別。 我無法使用自定義驗證器

public class RegisterViewModel
{
    [Required]
    public short? Gender { get; set; }
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

index.html的：

<div class="row">
   <div class="col-xs-8">
      @(Html.Kendo().ProgressBar()
         .Name("profileCompleteness")
         .Type(ProgressBarType.Value)
         .ShowStatus(false)
         .Min(0)
         .Max(4)
         .Value(1)
      )
      @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" , id="myForm" }))
      {
         @Html.AntiForgeryToken()
         @(Html.Kendo().TabStrip()
            .Name("tabstrip")
            .Items(tabstrip =>
            {
               tabstrip.Add().Text("Account Setup")
               .Selected(true)
               .Content(m => Html.Partial("_RegistrationStep1", m));
               tabstrip.Add().Text("Submit")
               .Enabled(false)
               .Content(m => Html.Partial("_RegistrationStep4", m));
            })
            .Events(ev =>
            {
               ev.Select("onSelect");
               ev.Show("onShow");
            })
         )
      }
   </div>
</div>
@section Scripts {
<script>
   var progress,
       tabs,
       currentIndex = 0;

   $(document).ready(function () {
       progress = $("#profileCompleteness").data("kendoProgressBar");
       tabs = $("#tabstrip").data("kendoTabStrip");
   })

   function onSelect(e) {

       var selectedIndex = tabIndexOfElement(e.item),

       isMovingBack = selectedIndex < currentIndex;

       if (isMovingBack || isTabValidAt(currentIndex)) {
           console.log("tab passed validation")
           currentIndex = selectedIndex;
           tabs.enable(getTabAtIndex(currentIndex), true);
       }
       else {
           e.preventDefault();
       }
   }

   function onPreviousClick(e) {
       e.preventDefault();
       tabs.select(tabs.select().prev());
   }

   function onNextClick(e) {
       e.preventDefault();

       tabs.select(getTabAtIndex(currentIndex + 1));
   }

   function getTabAtIndex(index) {
       return tabs.tabGroup.children().eq(index);
   }

   function tabIndexOfElement(element) {
       return tabs.element.find(element).index();
   }

   function isTabValidAt(tabIndex) {
       var el = tabs.contentElement(tabIndex),
           val = $(el).kendoValidator().data("kendoValidator");
       return val.validate();
   }

   function onShow(e) {
       progress.value(currentIndex + 1);
   }

</script>

_registrationStep1.html：

<div>
   <div class="form-group">
      @Html.LabelFor(m => m.Email)
      @(Html.Kendo().TextBoxFor(m => m.Email)
      .HtmlAttributes(new { placeholder = "you@domain.com", type = "email", @class = "k-textbox required" })
      )
   </div>
   @Html.RadioButtonFor(model => model.Gender, "1", new { id = "male"  }) Male
   @Html.RadioButtonFor(model => model.Gender, "0", new { id = "female"}) Female
   <footer class="col-lg-12 form-group text-right">
      @(Html.Kendo().Button()
      .Name("Next1")
      .Content("Next")
      .HtmlAttributes(new { @class = "k-primary" })
      .Events(ev => ev.Click("onNextClick")))
   </footer>
</div>

Answer 1

我有一個類似的問題（我記得）與ajax調用有關，以加載擦除驗證的選項卡。 對我來說，它消除了所有驗證，因此，如果僅您的自定義驗證程序不起作用，這可能不會有太大幫助。

我正在通過操作加載選項卡：

.LoadContentFrom("MyAction", "MyController", new { myId = Model.MyID })

我的解決方案是為加載的內容添加一個事件：

.Events(ev =>
 {
     ev.Select("onSelect");
     ev.Show("onShow");
     ev.ContentLoad("onContentLoad")
 })

然后重新加載表單驗證：

function onContentLoaded() {
   $("#myForm").kendoValidator();
};

Answer 2

我使用自定義驗證編寫了一個解決方案（ 我嘗試使用DatePicker ）：

• 在_registrationStep1.html中給ID名稱

    <div id="form0"> 

• 在index.html中創建自定義驗證器

    $("#form0").kendoValidator({ rules: { minDate: function (element) { if (element.is("[name=FINISH_DATE]")) { var value = $(element).val(); if (!value) return true; var date = kendo.parseDate(value); var result = date >= new Date(); //if (!result) // $(element).val(""); return result; } return true; } }, messages: { minDate: "The date must not be in the past" } }); 

• 最后，在下一步按鈕click（index.html）中調用validate方法：

舊：

        function isTabValidAt(tabIndex) {
             var el = tabs.contentElement(tabIndex),
             val = $(el).kendoValidator().data("kendoValidator");
             return val.validate();
        }

新：

        function isTabValidAt(tabIndex) {
            //var el = tabs.contentElement(tabIndex),
            //val = $(el).kendoValidator().data("kendoValidator");
            //var v1 = val.validate();
            return $("#form" + tabIndex).data("kendoValidator").validate();
        }