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:

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

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

Events

This plugin provides 2 events that you can listen on:

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:

Changelog

  • v1.4.0: Fix an issue that the Message plugin doesn't ignore field on IE11
  • v1.0.0: First release

More examples