rich:tooltip 显示没有字段验证错误的空工具提示答案

【问题标题】：rich:tooltip displays empty tooltip where no field validation errorrich:tooltip 显示没有字段验证错误的空工具提示
【发布时间】：2014-01-23 12:31:02
【问题描述】：

我正在使用 rich:tooltip 来显示验证错误消息。这适用于存在字段验证错误的字段，但对于没有字段验证错误的字段，mousemove 上会显示空的工具提示。这是我的使用方法

<rich:tooltip target="field1" layout="block" showDelay="500">
  <rich:message for="field1" />
</rich:tooltip>

可以使用渲染属性控制工具提示的渲染行为，但我不知道如何在我的页面上检查某个字段是否存在验证错误消息。

请给我一些关于如何摆脱这些空的工具提示的提示或想法。

【问题讨论】：

为此使用工具提示似乎有点违反直觉。用户是否应该被告知验证错误而不必将鼠标悬停在元素上以触发工具提示？
问题是我有一个非常复杂的动态生成的表单视图，如果我在输入字段附近显示消息会导致设计问题。这就是为什么我使用 Css 方法用红色矩形标记错误字段，鼠标移动它们会显示错误详细信息作为工具提示。
FacesContext 只为您提供给定 clientId 的所有消息的迭代器 - Map 非常适合您的目的。 TBO，我会为每个字段使用传统的<h:message，并通过 JavaScript 解析文档以获取字段消息并手动呈现工具提示。同样通过 Javascript，您可以解析空的工具提示框并在最后删除它们...
如何获取输入字段的组件客户端ID？ richt:tooltip 和 h:message 在 h:inputText 字段之外定义。

标签： jsf-2 richfaces

【解决方案1】：

您可以判断消息是否通过 Javascript 呈现。

空消息

<span class="rf-msg " id="menuForm:j_idt12"></span>

生成的消息

<span class="rf-msg " id="menuForm:j_idt12">
    <span class="rf-msg-err" id="menuForm:j_idt12:menuForm:error">
        <span class="rf-msg-sum">summary …</span>
        <span class="rf-msg-det">detail …</span>
    </span>
</span>

现在你可以这样做了：

.hidden {
    visibility: hidden;
}

<rich:tootltip styleClass="hidden">
    <rich:message … />
</rich:tooltip>

<rich:jQuery query="removeClass('hidden')" selector=".rf-tt:has(.rf-msg-err)" id="unhide" />

这将从消息不为空的所有工具提示中删除隐藏类。当您进行验证以使其正常工作时，您需要重新渲染它。

【讨论】：