如何使用包含验证错误的输入字段突出显示 p:tab答案

【问题标题】：How to highlight p:tab's with inputfields that contain validation errors如何使用包含验证错误的输入字段突出显示 p:tab
【发布时间】：2019-09-29 08:53:14
【问题描述】：

一个大表单有几个输入字段，因此它们被分组在 primefaces tabview 选项卡中。其中一些字段是强制性的。当用户尝试提交时，它会收到所需的消息，但用户必须滚动所有选项卡才能找到缺少字段的字段。有没有办法突出显示缺失值的选项卡？

【问题讨论】：

看看 Primefaces SpotLight 可能对你有帮助

标签： jsf primefaces

【解决方案1】：

我会亲自做这个客户端。

我将首先检查是否验证通常失败或与此处的 PrimeFaces 解决方案不同：
- How to find indication of a Validation error (required="true") while doing ajax command
在您可以调用的 javascript 函数中，我会通过 jquery 找到周围的表单。
- jQuery find parent form
从该表单开始，我会通过 jquery 找到所有带有指示错误的 css 类的输入。
- jquery find element by specific class when element has multiple classes
从每个错误中，我都会找到作为 div 选项卡的祖先元素（这可能是您最需要创意的地方，但它都是纯 jquery，如果您将其设为纯jquery question）并为此添加一个css类，以便您可以将其设置为“错误”。
我会再次使用 jquery 找到第一个有错误的选项卡并“假”点击它。
- find first occurrence of class in div
- Simulate a click on 'a' element using javascript/jquery

【讨论】：

一个例子可以在这个页面上找到：Primefaces: Displaying Tabs with Validation Errors

【解决方案2】：

您可以进行服务器端验证。因此，如果发生验证错误，您就会知道错误所在的选项卡。然后您可以使用TabView 的activetabindex 并激活您想要的选项卡。

然后你可以使用Spotlite as @fuggerjak61 来定位丢失/无效的字段。

【讨论】：

我假设验证已经在服务器端（JSF 的常见做法）。所以这使得你的第二个语句“所以如果发生验证错误，你知道错误所在的选项卡。”主要的“问题”......你怎么知道选项卡？你怎么找回它？如果你有多个标签怎么办？比你得到第一个，但你如何得到第二个？
我想你知道每个标签都有哪些字段。
我使用了 required 属性来验证。在服务器端很难验证。