Kendo单选按钮验证在Tabstrip中不起作用

Question

I try to write a wizard form using Kendo such as sample . I added a new property "Gender" into model and two radio buttons into _RegistrationStep1.html Validation is not working for gender if I don't select any radio button. I failed about using 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

I had a similar problem that (as I recall) was related to the ajax call to load the tabs wiping out validation. For me,it wiped out all the validation so if only your custom validator is not working this may not be of much help.

I was loading my tabs through an action:

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

My solution was to add an event for content loaded:

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

And then reload validation for the form:

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

Answer 2

I wrote a solution using custom validation( I tried for DatePicker ):

• Give id name to in _registrationStep1.html

    <div id="form0"> 

• Create custom validator in 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" } }); 

• Finally call validate method in next button click(index.html):

old:

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

new:

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