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:

<html>
    <head>
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="demoForm" method="POST">...</form>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>

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

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

The container option 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	Plugin
Bootstrap 3 framework	Bootstrap3 plugin
Bootstrap 4 framework	Bootstrap plugin
Bulma framework	Bulma plugin
Foundation framework	Foundation plugin
Materialize framework	Materialize plugin
Milligram framework	Milligram plugin
mini.css framework	Mini plugin
MUI framework	Mui plugin
Pure library	Pure plugin
Semantic UI framework	Semantic plugin
Shoelace library	Shoelace plugin
Spectre framework	Spectre plugin
Tachyons library	Tachyons plugin
turretcss framework	Turret plugin
UIkit framework	Uikit plugin

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

Using the npm packages

If you are using a bundler such as Webpack, Rollup, Parcel or Vite, etc., to bundle your application, then it's recommended to use the FormValidation NPM packages.

Install the packages:

$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-message

Import and use the Message plugin:

import { formValidation } from '@form-validation/bundle/popular';
import { Message } from '@form-validation/plugin-message';

formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            message: new Message({
                ...
            }),
            ...
        },
    }
);

Changelog

v2.4.0

The plugin can be enabled or disabled using the enablePlugin and disablePlugin methods

v2.0.0

Add the npm package

v1.8.0

Fix an issue found in the ES6 version of the Message plugin

v1.4.0

Fix an issue that the Message plugin doesn't ignore field on IE11

v1.0.0

First release

Materialize plugin Milligram plugin