如何在使用jQuery隐藏输入字段后正确定位HTML5表单验证错误消息



我有一个带有输入"text"字段的Symfony2表单,我用jQuery隐藏该字段,以便在其位置使用自动完成字段(输入字段的css设置为:"display:none")。考虑到该字段是必需的,当我尝试在不进行选择的情况下提交表单时,我会收到一条预期的验证错误消息。然而,我遇到的问题是HTML5客户端验证错误显示在浏览器窗口外(附在左下角),而不是自动完成字段所在的位置。发生这种情况是因为设置错误气泡位置的输入字段是隐藏的。

有没有一种简单的方法可以将错误气泡(来自HTML5表单验证)附加到另一个元素,使其显示在正确的位置?也许将它附加到输入字段的标签而不是小部件?还是使用jQuery插件创建的"ul"元素?为了提供一点上下文,我使用了Loopj Tokeninput jQuery插件,它创建了一个"ul"元素来代替表单的输入"text"字段(将后者的样式设置为"display:none")。

这与Symfony无关,但与HTML5客户端验证有关。

您可以在表单上指定novalidate属性来关闭整个表单的客户端验证,并滚动您自己的验证错误:

<form method="post" action="/foo" novalidate></form>

有关其他选项,请参阅此问题:禁用HTML5表单元素的验证

最新更新