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:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { icon: new FormValidation.plugins.Icon({ // Following is the default values valid: 'fv-plugins-icon--valid', invalid: 'fv-plugins-icon--invalid', validating: 'fv-plugins-icon--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.

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:

Framework Using with plugin
Bootstrap 3 framework Bootstrap 3
Bootstrap 4 framework Bootstrap
Bulma framework Bulma
Foundation framework Foundation
Materialize framework Materialize
Milligram framework Milligram
mini.css framework Mini
MUI framework Mui
Pure library Pure
Semantic UI framework Semantic
Shoelace library Shoelace
Spectre framework Spectre
Tachyons library Tachyons
turretcss framework Turret
UIkit framework Uikit

Tip

The MandatoryIcon plugin is useful when you want to display the mandatory icon for required fields

Using with Glyphicons

The Glyphicons icon set is included with Bootstrap v3, so you can use it as:






...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { bootstrap3: new FormValidation.plugins.Bootstrap3(), icon: new FormValidation.plugins.Icon({ valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh', }), }, } ); });

Using with FontAwesome

Follow the sample code below to use the icons provided by FontAwesome:






...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { icon: new FormValidation.plugins.Icon({ valid: 'fa fa-check', invalid: 'fa fa-times', validating: 'fa fa-refresh', }), }, } ); });

If you want to use the FontAwesome SVG icon instead of its CSS classes, take a look at the Using SVG icons section below.

Using with Semantic UI framework

The Semantic UI framework provides an icon set which can be used with the Icon plugin.

Followed by the suggestion from Semantic UI, the input must place inside ui input icon element:


Below is a starting point to use the Icon plugin along with the Semantic plugin:






...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { semantic: new FormValidation.plugins.Semantic(), icon: new FormValidation.plugins.Icon({ valid: 'checkmark icon', invalid: 'remove icon', validating: 'refresh icon', }), }, } ); });

Using with Spectre framework

The Spectre framework provides a built-in icons set which can be used with Spectre plugin.

In order to use these icons, you have to wrap the field in a has-icon-right class:


Below is a starting point to use the Icon plugin along with the Spectre plugin:







...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { spectre: new FormValidation.plugins.Spectre(), icon: new FormValidation.plugins.Icon({ valid: 'form-icon icon icon-check', invalid: 'form-icon icon icon-cross', validating: 'form-icon loading', }), }, } ); });

Using SVG icons

For more customization, you might want to use SVG icons in additonal to the CSS classes. Fortunately, the Icon plugin provides an event named plugins.icon.set that you can hook on when the field is being validated, valid or invalid:


FormValidation
    .formValidation(document.getElementById('demoForm'), {
        fields: {
            ...
        },
        plugins: {
            icon: new FormValidation.plugins.Icon({
                ...
            }),
        },
    })
    .on('plugins.icon.set', function(e) {
        // e.element presents the field element
        // e.field is the field name
        // e.status is the validation status which 
        // can be 'NotValidated', 'Validating', 'Valid' or 'Invalid'
        // e.iconElement presents the icon element that associates with the field element
        if (e.iconElement) {
            switch (e.status) {
                case 'Validating':
                    e.iconElement.innerHTML = '...';
                    break;

                case 'Invalid':
                    e.iconElement.innerHTML = '...';
                    break;

                case 'Valid':
                    e.iconElement.innerHTML = '...';
                    break;

                default:
                    e.iconElement.innerHTML = '';
                    break;
            }
        }
    });

We can use the SVG icon by setting e.iconElement.innerHTML.

You might need to set the width, height attributes for the SVG element to make it fit in the field. Also, the icon color can be adjusted by setting the stroke attribute:



    

Using with FontAwesome SVG icons

The following example shows how to listen on this event and display SVG icons provided by FontAwesome:

FontAwesome Icon SVG code
sync


    

times


    

check


    

Using with UIKit framework

The following example shows how to use SVG icons provided by UIKit framework:

UIKit Icon SVG code
refresh


    
    

close


    
    

check


    

Using material design icons

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

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;
            }
        }     
    });

Adjusting icon position

The Icon plugin generates the following markup for icon:


// FIELD_NAME is the name of field
// CSS_CLASSES is the list of CSS classes defined in the valid, invalid, validating options    

In some cases, the icons aren't shown properly. Understanding the markup of icon and customizing the value of top and right properties for icon's class, you can adjust the feedback icon to deserved position.

The following example demonstrates this technique when using the Bootstrap's Input Group with the Bootstrap plugin:




...
...

Hiding icon for particular field

Since each icon element for given field has data-field="FIELD_NAME" attribute, we can easily hide the icon by adding one more CSS property as:





Showing icons in custom area

In this example, I will help you how to show the feedback icons in custom area which are right after the labels. We're going to archive it by setting the onPlaced option which is called when the icon element is inserted to the document.


icon: new FormValidation.plugins.Icon({
    ...,
    onPlaced: function(e) {
        // e.classes is an object containing values for valid, invalid and validating CSS classes
        // e.element is the field element
        // e.field is the field name
        // e.iconElement is the icon element
    }
}),

Despite that the feedback icons are placed at the particular area, you might need customized CSS styles to adjust their position:





...

Changelog

  • v1.0.0: First release