如何将kendo验证器消息span元素置于被验证的输入下方?
问题描述:
我试图弄清楚这一点。 所有我看到的例子中,使用手动插入如何将kendo验证器消息span元素置于被验证的输入下方?
的html
与input
和span
元件我有以下代码产生形式和其datepicker
元素动态:
@using (Html.BeginForm("Reload", "FileDate", FormMethod.Post, new { returnUrl = this.Request.RawUrl, id = "DateForm", onsubmit = "return ValidateDate();" }))
{
@(Html.Kendo().DatePicker()
.Name("Date")
.Value(Session["FileDate"] == null ? DateTime.Now : Convert.ToDateTime(Session["FileDate"].ToString()))
.Events(e => e
.Change("datepicker_change")
)
)
@Html.Hidden("returnUrl", this.Request.RawUrl)
<script>
function datepicker_change() {
if(ValidateDate()){
$("#DateForm").submit();
}
}
</script>
}
当产生形式,我有在网页下面的代码:
这是一个验证:
<script>
$(document).ready(function() {
$("#mainMenu").kendoMenu();
$("#Date").attr('required', 'required');
$("#Date").attr('data-WrongFormat-msg', 'Date Format is Wrong');
var validator = $("#container").kendoValidator({
rules: {
WrongFormat: function (input) {
if (input.is("[data-role=datepicker]")) {
var dateBox = input.data("kendoDatePicker");
return input.data("kendoDatePicker").value();
} else {
return true;
}
}
}
})
});
function ValidateDate()
{
var validator = $("#container").data("kendoValidator");
if (validator.validate()) {
return true;
}
else
{
return false;
}
}
</script>
当我提供了不正确的输入或没有输入可言,我得到的span
正确的消息。然而,这种跨部修改了页面的布局:
我怎样才能解决这个问题,所以我error span
放在我的形式,它是像这里的一些例子中的显示方式下:http://dojo.telerik.com/ikUfu:
答
我有完全相同的问题。问题似乎是验证消息span元素在DatePickers的错误位置。正是这种元素中:
但是,在所有其他窗口小部件,它的垃圾邮件元素的一个水平内:
所以,看来这是目前在Telerik的一个bug。它适用于其他小部件,但不适用于DatePicker。我会看到并发现这个bug是否已经被报告,如果没有,就报告它。如果你迫切需要它尽快修复,我假设你可以尝试一些jquery魔法来移动span元素。