如何将 h:message 定位到 h:inputText 的右侧？答案

【问题标题】：How do I position h:message to the right of a h:inputText?如何将 h:message 定位到 h:inputText 的右侧？
【发布时间】：2012-05-12 16:41:23
【问题描述】：

我的xhtml页面代码：

<h:outputLabel value="Email address: " />
<h:inputText id="email" value="#{userBean.emailAddressBeingEdited}" required="true" requiredMessage="*" />
<h:message for="email" id="emailM"/>

我的java代码：

FacesContext.getCurrentInstance().addMessage("email", new FacesMessage("Email already in use"));

我尝试将 h:message 嵌套在 h:inputText 中，但这不起作用。如果我需要提供更多信息，请询问。

【问题讨论】：

@EJP：他们确实匹配。 emailM 是 id 的 <h:message>。

标签： jsf facelets

【解决方案1】：

您在addMessage() 中指定的客户端 ID 必须是真实的客户端 ID，而不是组件 ID。输入组件的客户端 ID 通常以父表单组件的 ID 为前缀。对于尚未记住哪些 JSF 组件实现 NamingContainer 以及如何生成客户端 ID 的初学者，找出真实客户端 ID 的最简单方法是在浏览器中打开页面，查看其源代码并找到生成的 HTML <input type="text">元素，最后取其id。如果您为<h:form> 提供了formId 的ID，它将是formId:email。这是您需要在addMessage() 中指定的真实客户端ID。

context.addMessage("formId:email", message);

如果您未指定正确的客户端 ID，则消息将保持未处理状态。如果 JSF 项目阶段设置为Development，那么 JSF 将自动将其附加到正文末尾的“未处理消息”列表中。这就是你所看到的。查看生成的HTML源码自己看，就是自动生成的HTML列表<ul id="javax_faces_developmentstage_messages">。

与具体问题无关，您似乎正在 JSF bean 操作方法中进行验证。这不是正确的方法。您应该为此使用Validator。这样您就无需担心客户端 ID。你只需要用FacesMessage 抛出ValidatorException。例如

@FacesValidator("uniqueEmailValidator")
public class UniqueEmailValidator implements Validator {

    @Override
    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        // ...

        if (emailIsAlreadyInUse) {
            throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Email is already in use", null));
        }
    }

}

然后在输入组件中注册为<f:validator validatorId="uniqueEmailValidator" />。

【讨论】：

他真的要添加所有的父ID吗？我有很多没有的 JSF 代码。
@EJP：显然您正在使用 <h:form prependId="false"> 或者您正在使用稍微不同的 JSF 实现/库。
我正在使用 Mojarra。永远不要在我的生活中设置 prepend="false" :-) 并且 id 肯定是复合的。
@EJP：我可以保证上面的 BalusC 状态是正确的，正如 JSF 规范中所述的那样。在 JSF 中，组件客户端 id 由实现 NamingContainer 和目标组件 id 的连接组件构成，除非设置了prependId="false"
我怀疑事实是我根本没有对 id 使用文字，而是从正在验证的组件中获取它们。

【解决方案2】：

<h:panelGrid columns="3">
   <h:outputLabel value="Email address: " />
   <h:inputText id="email" value="#{userBean.emailAddressBeingEdited}" required="true" requiredMessage="*" />
   <h:message for="email" id="emailM"/>
</h:panelGrid>

这个？？

【讨论】：

感谢您的建议，但不幸的是，这只是将错误消息放在其他所有内容下方而不是 h:inputText 框的右侧。
更新：这个答案很好，我只是使用了错误的 id。我会投票，但我还没有足够的声誉。