Showing messages in custom area

There is a few of scenarios which you might want to show messages in custom area, such as

  • Messages are shown above or below the form due to the limitation of form height
  • Messages are shown in a help panel located at the right of form
  • Messages are shown in the last step of a wizard

There are two ways to solve this requirement which are listed in the next sections. Both use different options provided by the Message plugin.

Using a CSS selector for the container

The form below shows messages in an element located at the bottom of form.

We can also improve the user experience here by making the invalid element focused when clicking the error.

Using a callback for the container

If you want to place messages which their positions depend on the field, you can use a callback. The following form places messages in the right:

More examples