提交后显示带有错误消息的 div答案

【问题标题】：Show div with error message after submit提交后显示带有错误消息的 div
【发布时间】：2015-04-17 10:01:25
【问题描述】：

我有一个简单的 JSF 登录表单，如果用户成功登录，它会重定向。如果用户无法登录，我不想只显示一个文本，而是一个带有消息的 div。只有当用户输入错误的数据并且无法登录时，我才想显示那段 html。

我该如何管理？你能给我一些例子吗，包括 JSF 的表单和支持 bean？

我找到了很多示例，但仅用于显示文本（h:message）。这些示例已经包括一些 html 包装器标记，例如 div ，其中包含该文本。我只想在提交失败时显示 div（如果用户名/密码错误，它将失败）。

让我用没有 JSF 数据的简单 html 来展示它的外观：

        <div class="error">Username/password not correct!</div>

        <label for="user_name">Username:</label>
        <input name="user_name" type="text" id="user_name" maxlength="20"/>

        <label for="password">Password:</label>
        <input name="password" type="password" id="password" maxlength="20"/>

        <input name="Submit" type="submit" id="log_btn" value="Login" />

所以，我希望我足够清楚 - 我不想在开始时显示此表单时拥有该 div 容器，但希望在用户尝试提交并输入错误数据时拥有该 div 容器。我不希望在每个输入下方都出现错误报告，只显示带有我的自定义单个错误消息的 div。

【问题讨论】：

我不确定。我不知道如何使用带有消息的 div 包装器的用户 h:message(s)。如果 h:message(s) 可以解决我的问题，我很乐意
我不确定 BalusC。不幸的是，我正在工作，这里没有我的 JSF 项目（我正在家里处理它）。我没有看到 div 元素也插入了消息？我应该写 facesContext.addMessage("formid:inputid", facesMessage);像 facesContext.addMessage("div_id:inputid", facesMessage);

我不需要，我需要基本的 div。这样可以吗？不，我需要包含 h:form 标签？
如何生成自己想要的元素？有时候想显示div或者span，有什么办法可以显示任何我想要的html？
我尝试过这样做：
不正确！
c:if> 但这并不好/部分好，因为我的登录类是 SessionScoped，所以一旦 auth.success_status 获得“错误”状态，就没有办法回来（例如 - 你尝试登录，你会得到正确的错误 div。但是，如果用户随后再次将同一页面写入 url，则会设置错误，尽管它不应该是.. 如何避免那个 Balus C？
我需要这个：
错误username/pass
所以我的问题用这段代码解决了。

标签： jsf message

【解决方案1】：

我试图这样做：不正确！但这不好/部分很好，因为我的登录类是 SessionScoped，所以一旦 auth.success_status 获得“错误”状态，无法返回（例如 - 你尝试登录，你得到正确的错误 div。但是，如果用户然后再次将同一页面写入 url，则会设置错误，尽管它不应该是.. 如何避免那个 Balus C？

然后让你的 bean viewScoped ！

但正确的答案（正如 BalusC 所说）是使用 FacesMessages。

这是一个如何使用 FacesMessages 和 CSS 样式类的示例：

JSF-XHTML：我在TABLE Layout中显示消息

<h:messages layout="table" showDetail="true" styleClass="FACES-MESSAGES" infoClass="MESSAGES-INFO" errorClass="MESSAGES-ERROR" warnClass="MESSAGES-WARN"/>

在你的 bean 中：

// FacesMessage.SEVERITY_ERROR, FacesMessage.SEVERITY_WARN or FacesMessage.SEVERITY_INFO
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_WARN, "ERROR: ", "Invalid Data....");
FacesContext.getCurrentInstance().addMessage(null, msg);

CSS: 用于 表格布局

.FACES-MESSAGES {
    width: 100%;
    border-collapse: seperated;
    border: 0px solid #DDDDDD;
    margin: 2px 0px 2px 0px;

}

.FACES-MESSAGES td{
    height: 18px;
    font-weight: normal;    
    font-size: 12px;    
    padding: 2px 2px 2px 22px;
}
.FACES-MESSAGES .MESSAGES-INFO{
    color: #0000DD;
    background: transparent url('images/message_info.png') 2px 0px no-repeat;

}

.FACES-MESSAGES .MESSAGES-ERROR{
    color: #BB0000;
    background: transparent url('images/message_error.png') 2px 0px no-repeat;

}
.FACES-MESSAGES .MESSAGES-WARN{
    color: #000;
    background: transparent url('images/message_warn.png') 2px 0px no-repeat;
}

【讨论】：