JSF Tutorial - JSF Messages Tag

The h:messages tag shows all the messages at one place corresponding to UI elements.

The following JSF tag

<h:messages style="color:red;margin:8px;" />

If username entered is more than 20 characters and password entered is less than 5 characters.

<ul style="color:red;margin:8px;">
   <li>  UserName: Validation Error: 
   Length is greater than allowable maximum of '20' </li>
   <li>  Password: Validation Error: 
   Length is less than allowable minimum of '5' </li>

Tag Attributes

idid for the tag
bindingReference to the component used in a backing bean
renderedA boolean value; false would suppress rendering
styleClassCascading stylesheet (CSS) class name
forThe component ID whose message is displayed
errorClassCSS class applied to error messages
errorStyleCSS style applied to error messages
fatalClassCSS class applied to fatal messages
fatalStyleCSS style applied to fatal messages
globalOnlyInstruction to display only global messages. Default: false
infoClassCSS class applied to information messages
infoStyleCSS style applied to information messages
layoutSpecification for message layout: table or list
showDetailA boolean that determines whether message details are shown. Defaults are false for h:messages, true for h:message
showSummaryA boolean that determines whether message summaries are shown. Defaults are true for h:messages, false for h:message
tooltipA boolean to set whether message details are rendered in a tooltip; the tooltip is only rendered if showDetail and showSummary are true
warnClassCSS class for warning messages
warnStyleCSS style for warning messages
styleInline style information
titleA title used for accessibility. Browsers typically create tooltips for the title's value


The following code is from demo.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="http://www.w3.org/1999/xhtml"   
      <h:messages style="color:red;margin:8px;" />
      <br />
      <h:panelGrid columns="3">
        Enter your username :
        <h:inputText id="username" value="#{user.username}" 
          size="20" required="true"
          label="UserName" >
          <f:validateLength minimum="5" maximum="10" />
        <h:message for="username" style="color:red" />

        Enter your age :
        <h:inputText id="age" value="#{user.age}" 
          size="20" required="true"
          label="Age" >
          <f:validateLongRange for="age" minimum="1" maximum="200" />
        <h:message for="age" style="color:red" />
      <h:commandButton value="Submit" action="result" />

The following code is from UserBean.java.

package com.java2s.common;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
public class UserBean implements Serializable{
  private static final long serialVersionUID = 1L;
  public String username;
  public int age;
  public String getUsername() {
    return username;
  public void setUsername(String username) {
    this.username = username;
  public int getAge() {
    return age;
  public void setAge(int age) {
    this.age = age;

The following code is from result.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="http://www.w3.org/1999/xhtml"   
    Username : #{user.username}
    <br />
    Age : #{user.age}

Download Message_Tag.zip


Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.