jQuery-validate 自定义规则导致其他无效字段被忽略

Question

抱歉，这可能真的很愚蠢，但我无法解决这个问题。

我使用 C#、ASP.NET MVC 5，并且我的模型中有以下内容:

    /// <summary>
    /// A none-nullable datetime representing the start of the meeting.
    /// </summary>
    [Display(Name = "Date")]
    [UIHint("Date")]
    public System.DateTime Start { get; set; }

    /// <summary>
    /// The time aspect of the Meeting Start is split off from the date
    /// portion. This property allows us to correctly display a separate
    /// date and time but uses the same underlying property.
    /// </summary>
    [Display(Name = "Time")]
    [UIHint("Time")]
    public System.DateTime StartTime
    {
        get
        {
            return Start;
        }
        set
        {
            Start = System.DateTime.ParseExact(Start.ToString("dd/MM/yyyy ") + value.ToString("HH:mm"), "dd/MM/yyyy HH:mm", System.Globalization.CultureInfo.InvariantCulture);

        }
    }

    /// <summary>
    /// The end time of the meeting.
    /// Since the system does not allow meetings to span multiple days this
    /// will be married up with the date part of Start when we save.
    /// </summary>
    [Display(Name = "Planned finish")]
    [UIHint("Time")]
    public System.DateTime Finish { get; set; }

    /// <summary>
    /// Set after the meeting to display actual start time.
    /// </summary>
    [Display(Name = "Started")]
    [UIHint("Time")]
    public System.DateTime Started { get; set; }

    /// <summary>
    /// Set after the meeting to display actual finished time.
    /// </summary>
    [Display(Name = "Finished")]
    [UIHint("Time")]
    public System.DateTime Finished { get; set; }

    [Required]
    [Display(Name ="Primary contact")]
    public string Contact { get; set; }

    [Required]
    [Display(Name = "Secondary contact")]
    public string Contact2 { get; set; }

在浏览器中，这对两个联系人都适用(即，除非它们都有值，否则表单不会提交。)我同时包含 jquery-validate.js 库和 microsoft jquery-validate-unobtrusive.js所以这些似乎工作正常。

我的问题的一部分是日期和时间选择器(注意 UIHint 属性)，它使用自定义编辑器模板，基本上创建一个 DevExpress 日期时间选择器(为了方便起见，稍后我添加了两个类，具体取决于选择器是否用于日期或时间输入 (devexpress-date devexpress-time)。这工作正常，并且验证属性(例如必需的等)很好地完成。但是...由于它们被视为日期和时间输入，因此它们无法根据格式进行验证(以日期为例，它只接受格式 yyyy-MM-dd。现在我已经通过以下示例解决了这个问题: Custom date format with jQuery validation plugin 。并且已经多次制作了类似的格式。

我已将所有这些内容放在一个单独的 js 文件中，我直接将其包含在两个验证库之后(使用 bundle )。从概念上讲，这一切似乎都不错(我从 http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2 获得了此指导)。但是...事情变得有点棘手。

为了澄清，我的 CustomValidators.js 包含:

(function ($) {
$.validator.addMethod("date", function (value, element, params) {
    if (!this.optional(element)) {
        var bits = value.match(/([0-9]+)/gi), str;
        if (!bits)
            return this.optional(element) || false;
        str = bits[1] + '/' + bits[0] + '/' + bits[2];
        alert("testing date " + value);
        return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
    }
    return true;
});
$.validator.unobtrusive.adapters.addBool("date");

$.validator.addMethod('time', function (value, element) {
    value = value.trim();
    alert("Testing time: " + value);
    if (value.length != 5 || value.indexOf(":") == -1) {
        return false;
    }
    var parts = value.split(":");
    var hour = ParseInt(parts[0]);
    var minutes = ParseInt(parts[1]);
    if (isNaN(hour) || isNaN(minutes)) {
        return false;
    }
    if (hour < 0 || hour > 23) {
        return false;
    }
    if (minutes < 0 || minutes > 59) {
        return false;
    }
    return this.optional(element) || true;
});

$.validator.unobtrusive.adapters.addBool("time");

}(jQuery));

** 问题 **

因为 devexpress 输入注册为日期时间，所以它尝试使用标准日期时间规则进行验证(返回 false 并给我一个关于无效日期的可爱验证摘要警告)。

为了解决这个问题，我尝试使用 $(document).ready() 将任何输入与 devexpress-date 和 devexpress-time 属性绑定(bind)以具有不同的规则:

        $(document).ready(function () {
        if ($("form").length > 0)
        {
            $("form").each(function () {
                $(this).validate();
                $(".devexpress-date input").each(function () {
                    $(this).addClass("devexpress-date");
                    $(this).rules("add", "date");
                });
            });

            $("form").each(function () {
                $(this).validate();
                $(".devexpress-time input").each(function () {
                    $(this).addClass("devexpress-time");
                    $(this).rules("add", "time");
                    $(this).rules("remove", "date");
                });
            });
          }
        }

• 抱歉，我相信我有向各个输入添加规则的来源，但我现在找不到它*

您会注意到我的验证器函数中存在一些警报，因此当我尝试提交表单时，我收到:

试用日期:2017年8月4日
尝试时间:00:00

我没有收到页面上其他三个时间框的警报，即使“联系人”或“联系人2”字段为空，表单也可以正常提交。就像我在这些元素之后破坏了验证，但我不明白为什么。

请问有人可以解释一下为什么吗？该应用程序将具有数字、文本、日期和时间输入，所有这些输入都具有类似的规则，因此理想的解决方案是使自定义规则起作用，以便我可以在具有表单的任何页面上运行在 document.ready() 中添加的上述规则，并且让它基本上自动工作。我以为我已经很接近了，但事实上其他验证现在不起作用，让我觉得我离我的意图还很远，所以感谢所有帮助。

谢谢。

Answer 1

我在 1.14 版本中遇到了这个问题。将 jquery.validate.js 升级到 1.17，将 jquery.validate.unobtrusive.js 升级到 3.2.6 解决了该问题。