我怎样才能让 typeahead.js 和 jquery.validate 一起玩？

Question

我有一个使用 jQuery 验证的 ASP.NET MVC 5 网站（MVC 项目模板中的 jquery.validate.js）。我正在尝试使用 typeahead.js 在表单中的一个输入字段上实现提前输入功能。（该表单恰好位于 bootstrap 模态框内）。

因为提交表单会发出一个AJAX请求，所以表单提交事件被捕获如下：

$form.on("submit", function (e) {

    if (!$form.valid()) {
        return false;
    }

    ... do stuff ...

请注意，这里发生的第一件事是检查表单是否存在任何验证错误，由 jQuery 验证库检测到。

如果我不使用typeahead，那么一切都很好。我可以在我的表单中输入值并提交，一切都很好。

但是，一旦我执行以下操作为我的输入添加提前输入功能：

$("#myInput").typeahead({
    minLength: 1,
    highlight: true
},
{
    source: mySource
});

...那我就不能再提交表格了。我的表格被认为是不有效：$form.valid() returns false.

我认为 typeahead.js 库正在向表单添加一些额外的元素（包括隐藏的输入），这让 jquery.validate.js 库感到困惑。

使用Chrome F12，似乎那里有一个看起来像原始输入副本的输入，遗憾的是该副本似乎已被复制，因此它也有所有 jQuery-验证属性。

我该如何解决这个问题？

Answer 1

似乎额外的输入上有 tt-hint class，因此您可以设置验证以忽略带有 class 的输入。

$form.validate({
    ignore: ':hidden, .tt-hint'
});

Answer 2

这似乎可行（在调用 typeahead() 之后立即放置：

$("input.tt-hint").removeAttr("data-val data-val-required data-val-maxlength data-val-maxlength-max");

How can I get typeahead.js to play nicely with jquery.validate?