<b:message /> since 0.8.1

Displays the FacesMessages of a single field in Bootstrap style. Use the for attribute to indicate which input field the <b:message > refers to. If the <b:message > immediately follows the input field, you can omit the for attribute: the default value of for is @previous.

Note that in most cases you don't need to use any ID, neither for the input field, nor for the <b:message >. This example only uses IDs because the Java bean needs them to generate the FacesMessage. In general, we recommend to avoid IDs. It's easier to move components around the page or to use copy and paste if you don't use IDs.

To escape or not to escape since 0.8.5

By public demand, we've added the escape attribute. It allows you to add HTML tags in your messages. Please note that this might be a security issue. You're responsible to make sure that hackers do not enter JavaScript code and have it executed when the page is rendered later. Therefore, BootsFaces prints a message to the console when it renders a message with escape="false" for the first time. This message can't be deactivated. We know that using HTML tags in your error messages is a useful features, but at the same time we want to make sure you're aware of the risk.

<b:messages /> since 0.7

Displays FacesMessages in Bootstrap style.

Default setting:

Unsafe setting (escape="false"):

<b:messages />: the for attribute since 0.9.0

The for attribute of BootsFaces is more flexible than the for of h:messages. You can use it to limit the list of error messages to a certain form. More precisely, you can show every error message of an arbitrary component and its children. To use this feature you have to set a second attribute recursive="true". By default, the for attribute only checks the component it points to, ignoring the children.

You can see the effect in the example below. The error messages in the live demo are updated as you type.

Separators between messages since 0.8.5

By default, the <b:message > tag separates multiple messages of a single input field with a <br /> tag. You can switch off this feature by setting line-break="false", or you can customizing it by providing an arbitrary HTML snippet. Note that this snippet has to be escaped:

Type some text to see a single error message. Clear the password again to see multiple messages.

Password:

Multiple messages and <b:message />since 0.9.0

Standard JSF defines that <h:message /> displays only a single message. If there are multiple messages, a random message is displayed. By default, BootsFaces always displays every message that has been reported for the associated component. However, some developers need to be able to display a single message. If so, activate the attribute only-most-severe. Setting it to true makes BootsFaces find the message with the highest severity level and displays it. If there are multiple messages with identical severity level, a random message is displayed.

Default <b:message >:


<b:message only-most-severe="true" >:

Responsive design since 1.1.0

You can use all the attributes controlling the responsive behaviour of <b:column /> also with <b:messages />. Note that this is equivalent to putting it into a <b:column />. In particular, the CSS styles are inside the column div.

Visibility depending on screen size since 1.1.0

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:


Visible on >= md:
Visible on <= sm:
Visible on sm...lg:
Visible on xs and md:
Col-md-6, offset 2:

Reference section

Attribute Default value Description
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
dir (none) HTML: The direction of text display, either 'ltr' (left-to-right) or 'rtl' (right-to-left).
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
error-class
errorClass (alternative writing)
(none) CSS class to be used for messages with severity "ERROR".
error-style
errorStyle (alternative writing)
(none) CSS style to be used for messages with severity "ERROR".
escape true By default, error messages encode HTML and JavaScript code. Instead of being executed, the source code is displayed. This protects you against hacker attacks. By setting escape=false, you deactivate the protection, and allow HTML and JavaScript code to be rendered.
fatal-class
fatalClass (alternative writing)
(none) CSS class to be used for messages with severity "FATAL".
fatal-style
fatalStyle (alternative writing)
(none) CSS style to be used for messages with severity "FATAL".
for (none) The ID of the component whose attached FacesMessage object (if present) should be diplayed by this component. It takes precedence over globalOnly.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id (none) Get a string which uniquely identifies this UIComponent within the scope of the nearest ancestor NamingContainer component. The id is not necessarily unique across all components in the current view.
info-class
infoClass (alternative writing)
(none) CSS class to be used for messages with severity "INFO".
info-style
infoStyle (alternative writing)
(none) CSS style to be used for messages with severity "INFO".
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
line-break
lineBreak (alternative writing)
true If there's more than one message, they can optionally be separated by a line break. By default, the separator is a br tag.
line-break-tag
lineBreakTag (alternative writing)

If there's more than one message, they can optionally be separated by a line break. By default, the separator is a br tag. You can replace if with an arbitrary HTML snippet.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
only-most-severe
onlyMostSevere (alternative writing)
false By default, b:message shows every message reported for the component. You can limit it to one message by setting this flag to true. In this case, BootsFaces shows only the most important message (measured by the severity level).
redisplay true Flag indicating whether previously handled messages are redisplayed or not
rendered false A boolean value that indicates whether this component should be rendered. Default value: true.
show-detail
showDetail (alternative writing)
true Specifies whether the detailed information from the message should be shown. Default to true.
show-icon
showIcon (alternative writing)
true If false, the icon of the message is not show. Default = true.
show-summary
showSummary (alternative writing)
true Specifies whether the summary information from the message should be shown. Defaults to true.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) HTML: CSS styling instructions.
style-class
styleClass (alternative writing)
(none) The CSS class for this element. Corresponds to the HTML 'class' attribute.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
warn-class
warnClass (alternative writing)
(none) CSS class to be used for messages with severity "WARN".
warn-style
warnStyle (alternative writing)
(none) CSS style to be used for messages with severity "WARN".
  • bf-message This CSS class applies to the entire <b:message >.
  • bf-message-icon This CSS class applies to the spancode> tag surrounding the optional icon of the message.
  • bf-message-summary This CSS class applies to the spancode> tag surrounding the summary of the error message.
  • bf-message-detail This CSS class applies to the spancode> tag surrounding the detail of the error message.
Attribute Default value Description
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
dir (none) HTML: The direction of text display, either 'ltr' (left-to-right) or 'rtl' (right-to-left).
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
error-class
errorClass (alternative writing)
(none) CSS class to be used for messages with severity "ERROR".
error-style
errorStyle (alternative writing)
(none) CSS style to be used for messages with severity "ERROR".
escape true By default, error messages encode HTML and JavaScript code. Instead of being executed, the source code is displayed. This protects you against hacker attacks. By setting escape=false, you deactivate the protection, and allow HTML and JavaScript code to be rendered.
fatal-class
fatalClass (alternative writing)
(none) CSS class to be used for messages with severity "FATAL".
fatal-style
fatalStyle (alternative writing)
(none) CSS style to be used for messages with severity "FATAL".
for (none) Optional id or search expression. Only the messages of the component defined by the id and its children are shown. By default, the algorithm checks the ids, which means the the 'for' component has to be a NamingContainer. Note that this algorithm fails if you use the prependId='false'. Alternatively, you can activate a slower but more flexible algorithm by setting 'recursive' to true.
global-only
globalOnly (alternative writing)
false Specifies whether only messages (FacesMessage objects) not associated with a specific component should be displayed, ie whether messages should be ignored if they are attached to a particular component. Defaults to false.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id (none) Get a string which uniquely identifies this UIComponent within the scope of the nearest ancestor NamingContainer component. The id is not necessarily unique across all components in the current view.
info-class
infoClass (alternative writing)
(none) CSS class to be used for messages with severity "INFO".
info-style
infoStyle (alternative writing)
(none) CSS style to be used for messages with severity "INFO".
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
line-break
lineBreak (alternative writing)
true If there's more than one message, they can optionally be separated by a line break. By default, the separator is a br tag.
line-break-tag
lineBreakTag (alternative writing)

If there's more than one message, they can optionally be separated by a line break. By default, the separator is a br tag. You can replace if with an arbitrary HTML snippet.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
only-most-severe
onlyMostSevere (alternative writing)
false By default, b:messages shows every message reported. You can limit it to the most important messages by setting this flag to true. In this case, BootsFaces shows only the message with the severity level.
recursive false If set to true, b:messages checks the for attributes using a slower algorithm that doesn't require you to put the component into a namingcontainer.
redisplay false Set the flag indicating whether messages that have already been displayed should be displayed again. By default, messages are always redisplayed. Most likely, you'll want to set this flag to false.
rendered false A boolean value that indicates whether this component should be rendered. Default value: true.
show-detail
showDetail (alternative writing)
true Specifies whether the detailed information from the message should be shown. Default to true.
show-icon
showIcon (alternative writing)
true If false, the icon of the message is not show. Default = true.
show-summary
showSummary (alternative writing)
true Specifies whether the summary information from the message should be shown. Defaults to true.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) HTML: CSS styling instructions.
style-class
styleClass (alternative writing)
(none) The CSS class for this element. Corresponds to the HTML 'class' attribute.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
tooltip (none) If true, the message summary will be rendered as a tooltip (i.e. HTML title attribute).
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
warn-class
warnClass (alternative writing)
(none) CSS class to be used for messages with severity "WARN".
warn-style
warnStyle (alternative writing)
(none) CSS style to be used for messages with severity "WARN".
  • bf-message This CSS class applies to the entire <b:messages > tag (i.e. to the entire collection of messages).
  • bf-message This CSS class applies to the spancode> tag surrounding a single message.
  • bf-message-icon This CSS class applies to the spancode> tag surrounding the optional icon of the message.
  • bf-message-summary This CSS class applies to the spancode> tag surrounding the summary of the message.
  • bf-message-detail This CSS class applies to the spancode> tag surrounding the detail of the message.