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

OptionTypeDescription
clazzStringThe CSS class added to the message element
containerString or FunctionDefine 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:
FrameworkPlugin
Bootstrap 3 frameworkBootstrap3 plugin
Bootstrap 4 frameworkBootstrap plugin
Bulma frameworkBulma plugin
Foundation frameworkFoundation plugin
Materialize frameworkMaterialize plugin
Milligram frameworkMilligram plugin
mini.css frameworkMini plugin
MUI frameworkMui plugin
Pure libraryPure plugin
Semantic UI frameworkSemantic plugin
Shoelace libraryShoelace plugin
Spectre frameworkSpectre plugin
Tachyons libraryTachyons plugin
turretcss frameworkTurret plugin
UIkit frameworkUikit 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({
...
}),
...
},
}
);

See also

Changelog

v2.4.0
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