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.
The attribute auto-update allows you to update a component on each AJAX request without explicitly mentioning it.
By default, you have to specify which parts of the DOM need to be updated. This can become tedious,
especially in the case of error messages. If an error occurs, you always want to inform your user.
Adding the attribute auto-update="true" does just that.
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.
Displays FacesMessages in Bootstrap style.
for attribute since 0.9.0The 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.
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:
<b:message />since 0.9.0Standard 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.
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.
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
You can filter the severities shown using the severity attribute.
The attribute takes one or more comma separated lower case severity names.
This can be useful if you want to distinguish between error messages and info messages. For instance,
severity allows you to use a b:growl for info messages and
this component for error messages.
Allowed severity names are: info, warn, error, fatal.
Note that severity is only available for <b:growl /> and (plural) <b:messages />.
It's not implemented for (singular) <b:message />.
| Attribute | Default value | Description |
|---|---|---|
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| 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 |
|---|---|---|
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| 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. |
| severity | (none) | Comma separated list of lower case severity names of which messages should be rendered in this component. Allowed severity names "info", "warn", "error", "fatal". Default value: "info,warn,error,fatal" (all severities). |
| 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.