如何让typeahead.js与jquery.validate很好地配合？

Question

我有一个ASP.NET MVC 5网站，它使用jQuery验证（MVC项目模板中的jquery.validate.js）。我正在尝试使用typeahead.js在表单中的一个输入字段上实现预先输入功能。 （形式恰好在引导模态中。）

因为提交表单会产生一个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()返回false。

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

使用Chrome F12，似乎有一个输入看起来像原始输入的副本，遗憾的是，副本似乎已经复制，因此它还包含所有jQuery验证属性的副本。

我该如何解决这个问题？

Answer 1

这似乎有效（在调用typeahead()后立即放置：

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

Answer 2

额外输入似乎有tt-hint类，因此您可以设置validate以忽略该类的输入。

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