Question

我有一个kendo datetimepicker控件，当用户手动输入错误格式的时间内缺少冒号时，验证不会捕获这个，并且在MVC控制器中，models属性具有空日期/时间。

我的客户端验证能够解析21/01/2015 1230，但是当它到达控制器服务器端的模型时为null，因为它无法映射和解析日期时间。

值输入的一些console.log输出和kendo.parseDate的努力。 21/01/2015 0000 2015年1月21日星期三00:00:00 GMT + 0000（格林威治标准时间标准时间）

以下是我的客户端验证。那么如何强制验证在客户端工作呢？

$("#accidentForm").kendoValidator({
rules: {
            date: function (input) {
                if (input.is("[name=Accident.IncidentDate]")) {
                    console.log(input.val());
                    var d = kendo.parseDate(input.val());
                    console.log(d);
                    return d instanceof Date;
                }

                return true;
            }
        },
        messages: {
            customRuleDateTimePick: "Incident date time format incorrect."
        }
    });

    // attach a validator to the container and get a reference
    var validatable = $("#accidentForm").kendoValidator().data("kendoValidator");

    $("#btnSave").click(function () {
        //validate the input elements and check if there are any errors
        if (validatable.validate() === false) {
            // get the errors and write them out to the "errors" html container
            var errors = validatable.errors();
            $(errors).each(function () {
                $("#errors").html(this);
            });
            return false;
        }
        return true;
    });

Answer 1

确定在kendo.parseDate上指定格式和culture参数似乎可以帮助和停止发送到服务器，直到输入有效的日期和时间。

$("#accidentForm").kendoValidator({
        rules: {
            date: function (input) {
                if (input.is("[name=Accident.IncidentDate]")) {
                    var d = kendo.parseDate(input.val(), ["dd/MM/yyyy HH:mm"], 'en-GB');
                    return d instanceof Date;
                }

                return true;
            }
        },
        messages: {
            date: "Incident date time format incorrect."
        }
    });

我认为另一个更简单的方法是扩展日期类型的验证器方法。然后，这会获取MVC错误消息属性，因此我可以使用正确的resource.resx文件而不是硬编码我的错误文本。

<script type="text/javascript">
    $(function () {
        $.validator.methods.date = function (value, element) {
            // Custom validation required for DateTimePicker, so use kendo.parseDate as it works better than jquery unobtrusive validation.
            return this.optional(element) || kendo.parseDate(value, ["dd/MM/yyyy HH:mm"], 'en-GB') !== null;
        }
    });
</script>

Kendo DateTimePicker格式HHmm

1 个答案: