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.

<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

Showing messages in custom area

Using a CSS selector for the container

Using a callback for the container

See also