Kendo單選按鈕驗證不能在標籤條中工作

Question

我嘗試使用Kendo編寫嚮導表單，例如sample。我在模型和兩個單選按鈕中添加了一個新屬性「性別」，並將其放入_RegistrationStep1.html 如果我不選擇任何單選按鈕，驗證對於性別不起作用。我沒有關於使用custom validator

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）：

• 給ID名稱在_registrationStep1.html

  <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" 
       } 
      }); 
  

• 最後調用單擊下一步按鈕，驗證方法創建自定義的驗證（ index.html）：

老：

 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(); 
     }