使用JQuery验证的Kendo DatePickerFor

时间:2016-04-30 01:28:24

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

使用Telerik Kendo DatePickerFor控件时,我被封锁了几天。在添加DatePickerFor控件之前,所有其他控件都运行良好。它假设验证项目名称'下拉列表和其他复选框(在此帖中被忽略),所有错误消息都悬挂在UI页面的顶部。添加日期选择器控件和验证后,模型会获得正确的http post和datetime,但如果任何输入无效,则不会显示任何验证消息。如果删除日期时间选择器控件,验证将恢复正常。任何线索都表示赞赏。

CSHTML

@section Scripts {
    @Scripts.Render("~/bundles/kendo")
    <script src="~/Scripts/custom.validate.js"></script>
    <script type="text/javascript">
        $.validator.setDefaults({
            ignore: ""
        });
    </script>
}
@(Html.Kendo().DropDownListFor(model => model.ProjectName).Name("ProjectName")...)
@Html.Kendo().DatePickerFor(model => model.UptoTimestamp)

模型

public class IntegrationModel
{
    public string ProjectName { get; set; }
    public DateTime? UptoTimestamp { get; set; }
}

JQuery验证器

$(document).ready(function () {

$.validator.addMethod("validateType",
    function (value, element) {
        return $('#rbFor')[0].checked || $('#rbRev')[0].checked;
    });

$.validator.addMethod("validateUptoTimestamp",
    function (element) {
        var value = $(element).val();
        var date = kendo.parseDate(value);
        if (!date) {
            return false;
        }
        return true;
    });

$('#schedule_form').validate({
 rules: {
        ProjectName: {
            required: true
        },
        UptoTimestamp: {
            validateUptoTimestamp: true
        }
    },
    messages: {
        ProjectName: {
            required: "Please select a project"
        },
        UptoTimestamp: {
            required: "Please provide a valid time stamp"
        }
    },
    errorContainer: $('#errorContainer'),
    errorLabelContainer: $('#errorContainer ul'),
    wrapper: 'li'
});
})

1 个答案:

答案 0 :(得分:1)

尝试设置验证程序以验证隐藏字段。剑道将隐藏日期的原始输入。

$("#schedule_form").validate().settings.ignore = ":hidden:not(input)";