Message plugin

Display error message

Usage

This plugin displays error message taken from the message option of each validator.

The following piece of code is the starting point to use the Message plugin:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { message: new FormValidation.plugins.Message({ clazz: ..., container: ..., }), ... }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Options

Option Type Description
clazz String The CSS class added to the message element
container String or Function

Define where the message is displayed. It can be a CSS selector or a function as


function(field, element) {
    // field is the field name
    // element is the field element

    // Returns an element that will be used as message container
}    

By default, all messages are shown at the end of form.

Events

This plugin provides 2 events that you can listen on:


FormValidation
    .formValidation(
        document.getElementById('demoForm'),
        {
            fields: {
                ...
            },
            plugins: {
                message: new FormValidation.plugins.Message({
                    ...
                }),
            },
        }
    );
    .on('plugins.message.placed', function(e) {
        // This event is triggered after the Message plugin 
        // prepares the message elements for all fields
        
        // e.element: The field element
        // e.field: The field name
        // e.elements: The field elements
        // e.messageElement: The message element
    })
    .on('plugins.message.displayed', function(e) {
        // This event is triggered after the Message plugin displays the error
        
        // e.element: The field element
        // e.field: The field name
        // e.message: The error
        // e.messageElement: The message element
        // e.meta: The meta data returned by validation result if available
        // e.validator: The validator name
    });

Using with supported CSS frameworks

The Message plugin is enabled automatically when you use any of following plugins that support form made in particular CSS frameworks:

Framework Using with plugin
Bootstrap 3 framework Bootstrap 3
Bootstrap 4 framework Bootstrap
Bulma framework Bulma
Foundation framework Foundation
Materialize framework Materialize
Milligram framework Milligram
mini.css framework Mini
MUI framework Mui
Pure library Pure
Semantic UI framework Semantic
Shoelace library Shoelace
Spectre framework Spectre
Tachyons library Tachyons
turretcss framework Turret
UIkit framework Uikit

These plugins set the clazz and container options and then display the error message at the desired position. If you want the error messages to be shown at another area, set the defaultMessageContainer option as following snippet:


FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            bootstrap: new FormValidation.plugins.Bootstrap({
                // 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({
                container: ...,
            }),
        },
    }
);

Example: 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

Using a CSS selector for the container

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


...
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', }), }, } ); });

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 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:

Changelog

  • v1.0.0: First release