JSF - h:messages

The h:messages tag shows all the messages at one place corresponding to UI elements.
<h:messages style = "color:red;margin:8px;" /> 
Case: 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> 
</ul> 
id
Identifier for a component
binding
Reference to the component that can be used in a backing bean
rendered
A boolean; false suppresses rendering
styleClass
Cascading stylesheet (CSS) class name
for
The ID of the component whose message is displayed, applicable only to h:message
errorClass
CSS class applied to error messages
errorStyle
CSS style applied to error messages
fatalClass
CSS class applied to fatal messages
fatalStyle
CSS style applied to fatal messages
globalOnly
Instruction to display only global messages, applicable only to h:messages. Default: false
infoClass
CSS class applied to information messages
infoStyle
CSS style applied to information messages
layout
Specification for message layout: table or list, applicable only to h:messages
showDetail
A boolean that determines whether message details are shown. Defaults are false for h:messages, true for h:message
showSummary
A boolean that determines whether message summaries are shown. Defaults are true for h:messages, false for h:message
tooltip
A boolean that determines whether message details are rendered in a tooltip; the tooltip is only rendered if showDetail and showSummary are true
warnClass
CSS class for warning messages
warnStyle
CSS style for warning messages
style
Inline style information
title
A title, used for accessibility, that describes an element. Visual browsers typically create tooltips for the title’s value
Let us create a test JSF application to test the above tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>JSF Tutorial!</title> 
   </head>
   
   <body> 
      <h2>h:messages example</h2> 
      <hr /> 
      
      <h:form> 
         <h:panelGrid id = "panel" columns = "2" border = "0" cellpadding = "10"  
         cellspacing = "1">   
            <h:outputLabel value = "Enter Username" /> 
            
            <h:inputText  id = "username"  size = "20" label = "UserName"  
               required = "true"> 
               <f:validateLength for = "username" minimum = "5" maximum = "20" />    
            </h:inputText>         
            <h:outputLabel value = "Enter Password" /> 
            
            <h:inputSecret id = "password" size = "20" label = "Password"  
               required = "true" redisplay = "true" > 
               <f:validateLength for = "password" minimum = "5" maximum = "10" />  
            </h:inputSecret>         
            <h:commandButton id = "submit" value = "Submit" action = "result"/> 
         </h:panelGrid> 
         <h:messages style = "color:red;margin:8px;" /> 
      </h:form> 
   
   </body> 
</html> 
Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce following result:

    37 Lectures 
     3.5 hours 

 Chaand Sheikh
 Print
 Add Notes
 Bookmark this page