[英]Kendo radio button validation not working in tabstrip
我尝试使用Kendo编写一个向导表单,例如sample 。 我在模型中添加了新属性“性别”,并在_RegistrationStep1.html中添加了两个单选按钮。如果我未选择任何单选按钮,则验证不适用于性别。 我无法使用自定义验证器
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>
我有一个类似的问题(我记得)与ajax调用有关,以加载擦除验证的选项卡。 对我来说,它消除了所有验证,因此,如果仅您的自定义验证程序不起作用,这可能不会有太大帮助。
我正在通过操作加载选项卡:
.LoadContentFrom("MyAction", "MyController", new { myId = Model.MyID })
我的解决方案是为加载的内容添加一个事件:
.Events(ev =>
{
ev.Select("onSelect");
ev.Show("onShow");
ev.ContentLoad("onContentLoad")
})
然后重新加载表单验证:
function onContentLoaded() {
$("#myForm").kendoValidator();
};
我使用自定义验证编写了一个解决方案( 我尝试使用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" } });
最后,在下一步按钮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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.