Icon plugin
Display various icons based on the field validity
Usage
With this plugin, you can see the icon whenever the field is being validated, and after the validation completes, it also displays other icon depending on the field is valid or not.
The following piece of code is the starting point to use the Icon 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: {
icon: new FormValidation.plugins.Icon({
valid: 'fv-plugins-icon--valid',
invalid: 'fv-plugins-icon--invalid',
validating: 'fv-plugins-icon--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.
The validating, valid and invalid options present the list of CSS classes separated by a space that will be added to the icon when the field is being validated, valid or invalid.
The Icon plugin only supports the form made in the following CSS frameworks:
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.
$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-icon
- Import and use the Icon plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { Icon } from '@form-validation/plugin-icon';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
icon: new Icon({
valid: '...',
invalid: '...',
validating: '...',
}),
...
},
}
);
See also
Changelog
- Hide the clear field icon on Internet Explorer. So you will not see two icons when using with the Icon plugin