自定义不显眼的验证方法未按照文档触发

Posted 2023-05-08

【中文标题】自定义不显眼的验证方法未按照文档触发

【英文标题】：Custom Unobtrusive Validation Method Not Firing as Per Documentation

【发布时间】：2018-02-12 22:25:09

【问题描述】：

我一直在尝试实现 ASP.NET MVC 自定义验证方法。我使用过的教程（例如codeproject）解释了您将data-val-customname 添加到元素中。然后jQuery.validate.unobtrusive.js再使用属性的第三段

data-val-<customname>

作为规则的名称，如下所示。

$.validator.addMethod('customname', function(value, element, param) 
    //... return true or false
);

但是我无法触发 customname 方法。通过玩耍，我已经能够让下面的代码工作，但根据我读过的所有资料来源，不显眼的验证不应该像这样工作。

$.validator.addMethod('data-val-customname', function(value, element, param) 
    //... return true or false
);

我已经发布了这两种方法的示例 jsfiddle example

任何帮助将不胜感激

我已经更新了我的问题，希望能更清楚。

【问题讨论】：

你误解了data-val-属性的使用。 jquery.validate.unobtrusive.js 读取它们以添加您当前未执行的元素规则。请参阅updated fiddle 了解如何为元素添加规则

感谢您的回复，我的印象可能是添加适配器执行了可选的参数重新映射，这些参数作为属性添加到元素，因此规则可以访问他们需要的数据。然而，在updated fiddle 中，尽管将适配器添加到jquery.validate.unobtrusive.js，两种自定义验证方法仍然不会触发。

对不起，我不明白你的意思。如果您将文本框留空并单击按钮，则会显示由data-val-one 定义的消息，然后如果您输入一个值，您将获得由data-val-two 定义的消息，这正是应该发生的。你在期待什么？

我以为我快疯了，我发现这只会发生在 Windows 10 上的 Chrome Canary 版本 62 和 63 上，如果在 Firefox 和 Edge 上进行检查，并且这有效。非常感谢您的帮助

使用 data-val- 添加自定义方法的失败似乎在我在 Chrome Canary Windows 10 版本 63.0.3206.0 (Official Build) canary (64-少量）。这也无法在 OS X Chrome Canary 版本 62 上运行。但是现在我已经在 OS X 上更新到 63.0.3207.0。

【参考方案1】：

我终于找到了，但仍然觉得工作太辛苦了，因此我可能有问题。最初，我被 Chrome Canary 62 中的一个错误所困扰，该错误拒绝允许添加自定义方法。

我的下一个问题是必须在标记中加载 jQuery、jQuery.validate 和 jQuery.validate.unobtrusive，然后在 ES6 类中隔离 javascript 实现。我不想在$().ready() 之前添加我的适配器，因为我的类结构和独立于 jQuery 的应用程序文件的加载。所以我不得不强制$.validator.unobtrusive.parse(document);。

尽管如此，我仍然遇到问题，最后调试了源代码，发现附加到表单的现有验证器信息没有与更新的解析规则合并，并且基本上忽略了添加的任何新适配器。

我的最后一项工作是在我强制重新解析之前销毁初始验证信息，并承认感觉自己做的太多了。

这是工作的jsfiddle demo

这是一些简化的代码

onJQueryReady() 
    let formValidator = $.data(document.querySelector('form'), "validator" );
    formValidator.destroy();

    $.validator.unobtrusive.adapters.add("telephone", [], function (options) 
        options.rules['telephone'] = ;
        options.messages['telephone'] = options.message;
    );

    $.validator.unobtrusive.parse(document);

    $.validator.addMethod("telephone", this.handleValidateTelephoneNumber);