带有 JQuery 验证的 Kendo DatePickerFor

Posted 2023-05-07

【中文标题】带有 JQuery 验证的 Kendo DatePickerFor

【英文标题】：Kendo DatePickerFor with JQuery validation

【发布时间】：2016-08-25 06:54:01

【问题描述】：

我在使用 Telerik Kendo DatePickerFor 控件时被阻止了几天。在添加 DatePickerFor 控件之前，所有其他控件都运行良好。它应该验证“ProjectName”下拉列表和其他复选框（在这篇文章中被忽略），所有错误消息都挂在 UI 页面的顶部。添加日期选择器控件和验证后，模型确实获得了正确的 http post 和日期时间，但如果任何输入无效，则不会显示任何验证消息。如果删除日期时间选择器控件，验证将恢复正常。任何线索表示赞赏。

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】：

尝试设置验证器来验证隐藏字段。 Kendo 将隐藏日期的原始输入。

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