我有一个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验证属性的副本。
我该如何解决这个问题?
答案 0 :(得分:4)
这似乎有效(在调用typeahead()
后立即放置:
$("input.tt-hint").removeAttr("data-val data-val-required data-val-maxlength data-val-maxlength-max");
答案 1 :(得分:0)
额外输入似乎有tt-hint
类,因此您可以设置validate以忽略该类的输入。
$form.validate({
ignore: ':hidden, .tt-hint'
});