Kendo单选按钮验证无法在标签页中使用

时间:2017-02-28 12:08:54

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

我尝试使用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>

2 个答案:

答案 0 :(得分:0)

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

我正在通过动作加载我的标签:

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

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

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

然后重新加载表单的验证:

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

答案 1 :(得分:0)

我使用自定义验证编写了一个解决方案(我尝试过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"
            }
        });
    
  • 最后在下一个按钮点击(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();
        }