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



抱歉,这可能是一件非常愚蠢的事情,但我无法解决这个问题。

我正在使用 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。现在,我按照此处的示例解决了这个问题:使用 jQuery 验证插件自定义日期格式。并且已经多次制作了类似的。

我已经将所有这些放在一个单独的 js 文件中,我直接包含在两个验证库之后(使用捆绑包)。从概念上讲,这一切似乎都没问题(我从以下方面获得了指导:http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2)。但。。。这就是事情变得有点棘手的地方。

为了澄清起见,我的自定义验证器.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 属性绑定到不同的规则:

$(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");
});
});
}
}
  • 抱歉,我相信我有一个向单个输入添加规则的来源,但现在找不到它 *

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

试用日期: 08/04/2017
试用时间: 00:00

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

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

谢谢。

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

最新更新