我怎样才能让typeahead.js与jquery.validate玩得很好

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

本文关键字：jquery validate 很好 js typeahead      更新时间：2023-09-26

我有一个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验证属性的副本。

我该如何解决这个问题？

这似乎有效（位于对typeahead():的调用之后

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

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

$form.validate({
    ignore: ':hidden, .tt-hint'
});
相关文章：