MandatoryIcon plugin

Show required icons for mandatory fields


The following piece of code is the starting point to use the MandatoryIcon plugin:


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: '...', }), ... }, } ); });

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',

Basic example