If you are a fan of using Google's
material design, then you might prefer to use
its icons set.
It's up to you to choose suitable icons from Google material design icons for the feedback icons. The following table is just an example of three icons taken from the set:
| Field status | Icon |
|---|
| Valid | <i class="material-icons">check</i> |
| Invalid | <i class="material-icons">clear</i> |
| Being validated | <i class="material-icons">graphic_eq</i> |
As you see, each Google material design icon uses pre-defined content instead of a different CSS class. Meanwhile, the Icon's plugin options only accept CSS classes that are added to the icon based on the field validity.
The next section introduces two approaches to solve this problem.
Defining icon content by CSS
By using the :after CSS selector, we can indicated content of icons as following:
.material-icons.valid-icon:after {
content: 'check';
font-size: 24px;
}
.material-icons.invalid-icon:after {
content: 'clear';
font-size: 24px;
}
.material-icons.validating-icon:after {
content: 'graphic_eq';
font-size: 24px;
}
Lastly, you just set the icons for each status of field:
icon: new FormValidation.plugins.Icon({
valid: 'material-icons valid-icon',
invalid: 'material-icons invalid-icon',
validating: 'material-icons validating-icon',
}),
Defining icon content by CSS
Triggering the event
In order to update the content of icon based on the field validity status, we can trigger the event plugins.icon.set as mentioned in the Using SVG icons section above.
FormValidation.formValidation(document.getElementById('demoForm'), {
plugins: {
icon: new FormValidation.plugins.Icon({
valid: 'material-icons icon-valid',
invalid: 'material-icons icon-invalid',
validating: 'material-icons icon-validating',
}),
},
}).on('plugins.icon.set', function (e) {
if (e.iconElement) {
switch (e.status) {
case 'Validating':
e.iconElement.innerHTML = 'graphic_eq';
break;
case 'Invalid':
e.iconElement.innerHTML = 'clear';
break;
case 'Valid':
e.iconElement.innerHTML = 'check';
break;
default:
e.iconElement.innerHTML = '';
break;
}
}
});
See also