Showing messages in custom area

There is a few of scenarios which you might want to show messages in custom area, such as
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.
<form id="demoForm">
...
<!-- Message container -->
<div class="fl w-75" id="messages"></div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
tachyons: new FormValidation.plugins.Tachyons({
// Do not show the error message in default area
defaultMessageContainer: false,
}),
// I want to display errors at my own areas
message: new FormValidation.plugins.Message({
clazz: 'red lh-copy',
container: '#messages',
}),
},
}
);
});
</script>
We can also improve the user experience here by making the invalid element focused when clicking the error.
FormValidation
.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
message: new FormValidation.plugins.Message({
...
}),
},
}
)
.on('plugins.message.displayed', function(e) {
e.messageElement.addEventListener('click', function() {
e.element.focus();
});
});
Using a CSS selector for the container

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:
Using a callback for the container

See also