2017-04-07 92 views
1

道歉,这可能是一件非常愚蠢的事情,但我无法解决这个问题。jQuery-验证自定义规则会导致其他无效字段被忽略

我使用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库和微软的jquery-validate-unobtrusive.js,所以这些似乎工作正常。

我的问题的一部分是日期和时间选择器(注意到UIHint属性),它使用基本上创建DevExpress日期时间选择器的自定义编辑器模板(为了方便以后,我添加了两个类,具体取决于选择器是一个日期或时间输入(devexpress-date devexpress-time),这个工作正常,验证属性如需要等等,但是...因为它们被认为是日期和时间输入,所以它们根据格式(以日期为例,它只接受格式为yyyy-MM-dd。现在我通过下面的例子来解决这个问题:Custom date format with jQuery validation plugin。并且做了一个类似的例子。

我已经把所有这些在一个单独的js文件中我包含了直接的af三个验证库(使用一个包)。这一切在概念上似乎都没问题(我从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的输入注册为日期时间它会尝试使用标准的datetime规则(返回false,并给了我一个可爱的验证摘要警告有关无效的日期)来验证。

为了解决这个问题我已经在尝试$(文件)。就绪()绑定与DevExpress的最新和DevExpress的时间属性的任何投入,有不同的规则:

 $(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

我没有得到一个警告,即使在页面上,其他三个时间框的联系或Contact2字段为空的形式提交罚款。这就像我已经打破这些元素的验证,但我不明白为什么。

请问有人能向我解释为什么?该应用程序将具有数字,文本,日期和时间输入都具有类似的规则,所以理想的解决方案是使自定义规则的工作,以便我可以运行上述规则添加document.ready()任何页面上有一个窗体和因为它基本上可以自动工作。我认为我很接近,但其他验证现在不起作用的事实让我觉得我离我的意图还有很长的路要走,所以所有的帮助都是值得赞赏的。

谢谢。

回答

0

我遇到了这个版本1.14。将jquery.validate.js升级到1.17,将jquery.validate.unobtrusive.js升级到3.2.6,可以解决问题。