This post is about the different ways that we have to display validation messages when, for example, an input component is marked as required or when other component such as af:validateDoubleRange is used to handle the validation.

We can have a simple form like this:

But if we have more than one validation error, the messages will be displayed in a popup.

• af:messages

 We have a couple of properties to configure.

• globalOnly: When set to true, validation messages will not be displayed within this af:messages component.
• inline: Whether the messages will be displayed in a popup or inline wherever this component is placed

We can add this component, for example, in the top of the form and whenever we get a validation error al messages will be displayed in that area.

• af:message

 The second option is to add as many af:message as components we have so we can display validation errors inline next to the component that produces the error.

It doesn’t matter if we have 1 or more errors, all messages will be displayed inline, next to the component.