MandatoryIcon plugin

Show required icons for mandatory fields

Usage

The following piece of code is the starting point to use the MandatoryIcon 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 src="/vendors/@form-validation/umd/plugin-mandatory-icon/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
// You have to enable MandatoryIcon plugin before the Icon plugin
mandatoryIcon: new FormValidation.plugins.MandatoryIcon({
// The CSS classes (separated by a space) that present the icon
icon: '...'
}),
icon: new FormValidation.plugins.Icon({
valid: '...',
invalid: '...',
validating: '...',
}),
...
},
}
);
});
</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.
For example, to use the plugin with FontAwesome, we can set the icon option as:
mandatoryIcon: new FormValidation.plugins.MandatoryIcon({
icon: 'fa fa-asterisk',
}),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),

Important note

You have to register the MandatoryIcon plugin before the Icon plugin.
// Does NOT work
plugins: {
icon: new FormValidation.plugins.Icon(...),
mandatoryIcon: new FormValidation.plugins.MandatoryIcon(...),
},
// Work
plugins: {
mandatoryIcon: new FormValidation.plugins.MandatoryIcon(...),
icon: new FormValidation.plugins.Icon(...),
},

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-mandatory-icon
$ npm install @form-validation/plugin-icon
  • Import and use the MandatoryIcon plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { MandatoryIcon } from '@form-validation/plugin-mandatory-icon';
import { Icon } from '@form-validation/plugin-icon';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
// Register the MandatoryIcon plugin before the Icon plugin
mandatoryIcon: new MandatoryIcon({
...
}),
icon: new Icon({
...
}),
...
},
}
);

Basic example

MandatoryIcon plugin

See also

Changelog

v2.4.0
v2.0.0
  • Add the npm package
v1.10.0
  • The icons disappear when switching between steps in a wizard
v1.6.0
  • Fixed an issue that the plugin doesn't work with textarea element
v1.0.0
  • First release