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

How to highlight p:tab's with inputfields that contain validation errors

一个大表单有几个输入字段,因此它们被分组在 primefaces tabview 选项卡中。其中一些字段是必填的。当用户尝试提交时,它会收到所需的消息,但用户必须滚动浏览所有选项卡才能找到缺少的字段。有什么方法可以突出显示缺少值的选项卡吗?

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

然后您可以使用 Spotlite 作为 @fuggerjak61 所说的定位 missing/not 有效字段。

我会亲自做这个客户端。

  1. 我会首先检查验证是否总体失败,或者不像这里的 PrimeFaces 解决方案那样:
    • How to find indication of a Validation error (required="true") while doing ajax command
  2. 在您可以调用的 javascript 函数中,我会通过 jquery 找到周围的表格。
    • jQuery find parent form
  3. 从那个表格向下,我会通过 jquery 找到所有带有 css class 的输入,表示错误。
    • jquery find element by specific class when element has multiple classes
  4. 从每个错误中,我会找到作为 div 选项卡的祖先元素(这可能是您需要最具创意的地方,但它都是普通的 jquery如果你把它变成一个简单的 jquery 问题,很多人可以帮助你)并添加一个 css class 这样你就可以设置它的样式 'in error'。
  5. 我会再次使用 jquery 找到第一个有错误的选项卡,然后 'fake' 单击它。
    • find first occurrence of class in div
    • Simulate a click on 'a' element using javascript/jquery