Declarative plugin

Provide the ability of declaring validator options via HTML attributes

Usage

As you know, you can declare the field validators in programmatic way:

This plugin allows to set the validator options by using equivalent HTML attributes. The following piece of code demonstrates how the Declarative plugin does it:

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 for field declarations

Option Type Description
html5Input Boolean Set it to true to enable the validators automatically based on the input type or particular HTML 5 attributes. By default, it's set to false. Look at the HTML 5 example below for more information.
prefix String The prefix of attributes. By default, it is set to data-fv-

The HTML attribute is a combination of prefixName-validatorName___optionName, where

  • prefixName is replaced with the prefix option above
  • validatorName is replaced with the lowercase of validator's name. Any uppercase characters found in validator's name has to be turned into a dash (-) followed by its lowsercase
  • optionName is replaced with the lowsercase of validator's option. Any uppercase characters found in validator's option has to be turned into a dash (-) followed by its lowsercase

Below is a few examples of declaring validator options in both programmatic and declarative modes:

Validator Programmatic mode Declarative mode
notEmpty
stringLength
uri

If there are multiple elements having the same name, you just need to set the HTML attribute to one of them. For example:

There are some validators which not all options are configurable via HTML attribute. Refer to each validator documentation to see exactly the equivalent HTML attribute for each option.

In that case, you can use both programmatic and declarative modes to set the validator options.

Options for plugin declarations

Notice

The plugin declaration isn't supported when using with ES6 module.
Option Type Description
pluginPrefix String The prefix of plugin declaration attributes. By default, it is set to data-fvp-

The HTML attribute is a combination of prefixName-pluginName___optionName, where

  • prefixName is replaced with the pluginPrefix option above
  • pluginName is replaced with the lowercase of plugin's name. Any uppercase characters found in plugin's name has to be turned into a dash (-) followed by its lowsercase
  • optionName is replaced with the lowsercase of plugin's option. Any uppercase characters found in plugin's option has to be turned into a dash (-) followed by its lowsercase

Each plugin declaration requires an attribute named prefixName-pluginName___class which indicates the plugin class. All the plugin declarations need to be set for the form element.

Following is a simple code that demonstrates how to declare the attributes for plugins:

It serves the same functionalities such as declaring plugins as

Basic example

Changelog

  • v1.4.0: Support the plugin declarations
  • v1.0.0: First release

More examples