Kendo Radio Button-Validierung funktioniert nicht in Tabstrip

Question

Ich versuche, ein Assistentenformular mit Kendo wie sample schreiben. Ich habe eine neue Eigenschaft "Geschlecht" in Modell und zwei Radio-Schaltflächen in _RegistrationStep1.html hinzugefügt Validierung funktioniert nicht für Geschlecht, wenn ich keinen Radio-Button auswählen. Ich nicht über die Verwendung von 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

Ich hatte ein ähnliches Problem, dass (wie ich mich erinnere) an die Ajax verwandt war Rufen Sie an, um die Tabs zu laden, die die Validierung löschen. Für mich hat es die gesamte Validierung gelöscht. Wenn also nur Ihr benutzerdefinierter Validator nicht funktioniert, ist das möglicherweise nicht viel hilfreich.

ich meine Tabs durch eine Aktion Laden:

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

Meine Lösung ein Ereignis für Inhalt geladen hinzufügen war:

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

Und dann Validierung für das Formular neu zu laden:

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

Answer 2

Ich schrieb eine Lösung mit benutzerdefinierten Validierung (Ich versuchte für DatePicker):

• Geben Sie id Namen in _registrationStep1.html

  <div id="form0"> 
  

• benutzerdefinierten Validator in index.html erstellen

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

• Schließlich Validate-Methode in der nächsten Tastenklick aufrufen (index.html):

alt:

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

neu:

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