Kendo 单选按钮验证在 tabstrip 中不起作用答案

【问题标题】：Kendo radio button validation not working in tabstripKendo 单选按钮验证在 tabstrip 中不起作用
【发布时间】：2017-07-19 09:41:03
【问题描述】：

我尝试使用剑道编写一个向导表单，例如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>

【问题讨论】：

标签： jquery asp.net-mvc telerik kendo-asp.net-mvc telerik-mvc

【解决方案1】：

我有一个类似的问题（我记得）与加载标签消除验证的 ajax 调用有关。对我来说，它消除了所有验证，所以如果只有您的自定义验证器不起作用，这可能没有太大帮助。

我正在通过一个动作加载我的标签：

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

我的解决方案是为加载的内容添加一个事件：

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

然后为表单重新加载验证：

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

【讨论】：

【解决方案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"
        }
    });

最后在next button 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();
        }

【讨论】：