Showing messages in custom area
There are many developers asking me for an example that demonstrates the ability of showing messages in custom area.
Here are few of scenarios which you might want to use this feature:
- 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.
Using the container option
The first solution which is easiest way is to use the container option.
This option indicates where the error messages are shown.
|CSS selector||All error messages are placed in element defined by this CSS selector|
|A callback|| |
A callback returns the element that the messages are placed in:
| ||Error messages of each field are placed inside a tooltip|
| ||Error messages of each field are placed inside a popover|
The contact form below shows messages in an element located at the bottom of form.
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:
Using the events
container option works fine. The messages are placed inside
span elements with
.help-block class. You might will ask for more customizations such as:
- I want to place each message inside a
lielement, therefore I can customize the style later
- I want to hide the default messages as well
- When click the message, I want the associated field to be focused
It's possible to solve these requirements by using the methods and events below:
|success.form.fv event||Triggered when the form is valid|
|err.field.fv event||Triggered when any field is invalid|
|success.field.fv event||Triggered when any field is valid|
|getMessages(field) method||Get the field messages|
Looking at the HTML and JS tabs to see how we get the job done.