与 formatter.js 和 jquery 验证插件不兼容？答案

【问题标题】：Incompatibility with formatter.js and jquery validation plugin?与 formatter.js 和 jquery 验证插件不兼容？
【发布时间】：2014-05-06 22:53:38
【问题描述】：

我遇到了 formatter.js 和验证 jquery 插件的问题。

<div class="formClear">
    <label for="text-basic">
        Phone<em> *</em></label>
    <input type="tel" name="Phone" id="Phone" class="required" />
</div>

当我将以下格式化程序应用于特定字段，然后使用 jquery 验证插件使其成为必填字段时，jquery 插件不再将其强制为必填字段。

if (document.getElementById('Phone') != null) {
    new Formatter(document.getElementById('Phone'), {
        'pattern': '({{999}}) {{999}}-{{9999}}',
        'persistent': true
    });
}

如果我注释掉那段代码，则强制执行该字段的必要性...但是当两者都到位时，不会发生对 Phone 字段的验证。就好像两者不是为了兼容而设计的。

具体来说，在调用 checkForm() 之后，errorMap 对象会出现所有验证失败，除了 Phone 的验证失败。格式化程序是否清除了 jquery 验证插件所依赖的一些事件处理程序，因此，我需要添加额外的代码吗？任何见解/代码示例将不胜感激。

【问题讨论】：

兼容性与它无关。在使用这些有用的免费插件时，网站开发人员总是需要做一些常识集成。显示足够的代码来制作一个简洁的示例，并且可能包括一个 jsFiddle 演示。你特别提到“打电话给checkForm()”，好像我们应该知道你在说什么。
我对@987654325@一无所知，但如果jQuery Validate插件在字段中看到一个值，那么required规则已经满足。也许有一种解决方法，但是您需要稍微解决一下这个问题。见：stackoverflow.com/help/how-to-ask
感谢您的建议，斯帕基。您的评论让我找到了正确的答案。

标签： javascript jquery jquery-plugins jquery-validate

【解决方案1】：

问题来自于 formatter.js 中的 Formatter 会将格式化输出放在文本框的值中，即使用户没有向该字段提供值。因此，在我的示例中，除非我将 persistent 设置为 false，否则所提供的模式将永远无法与来自 jquery 插件的必需字段验证一起使用：

if (document.getElementById('Phone') != null) {
    new Formatter(document.getElementById('Phone'), {
        'pattern': '({{999}}) {{999}}-{{9999}}',
        'persistent': false
    });
}

【讨论】：