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.

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>