The messages tag renders all message for the current view. You can customize the messages generated by this component by applying different CSS styles depending on the severity level of the messages (eg. red for error, green for information) as well as changing the detail level of the messages.

The messages tag supports two layouts for the generated messages: an HTML table or a bulleted list. The default layout is the list format. You can also customize the standard error messages by overriding specific JSF properties in your message bundle.

Example:

<h:form id="form">
  <h:inputText id="username" required="#{true}" value="#{userBean.user.username}" /><br />
  <h:inputSecret id="password" required="#{true}" value="#{userBean.user.password}" /><br />
  <h:commandButton id="submit" /><br />
  <h:messages showDetail="#{true}" showSummary="#{false}" />
</h:form>

HTML Output

<form id="form" name="form" method="post" action="/demo/messages.jsp" enctype="application/x-www-form-urlencoded">
  <input id="form:username" name="form:username" type="text" value=""/><br/>
  <input id="form:password" name="form:password" type="password" /><br/>
  <input id="form:submit" name="form:submit" type="submit" onclick="generatedCode();"/><br/>
  <ul> 
    <li>"username": Value is required.</li>
    <li>"password": Value is required.</li>
  </ul>
</form>