Guide
Validators
Plugins
Examples
Updates
Purchase

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:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.333 512" width="16" height="16">
    <path d="" stroke="#ff4136" />
</svg>

Using with FontAwesome SVG icons

The following example shows how to listen on this event and display SVG icons provided by FontAwesome:
sync
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.333 512" width="16" height="16">
    <path
        d="M440.935 12.574l3.966 82.766C399.416 
    41.904 331.674 8 256 8 134.813 8 33.933 94.924 
    12.296 209.824 10.908 217.193 16.604 224 24.103 
    224h49.084c5.57 0 10.377-3.842 11.676-9.259C103.407 
    137.408 172.931 80 256 80c60.893 0 114.512 30.856 
    146.104 77.801l-101.53-4.865c-6.845-.328-12.574 
    5.133-12.574 11.986v47.411c0 6.627 5.373 12 12 
    12h200.333c6.627 0 12-5.373 
    12-12V12c0-6.627-5.373-12-12-12h-47.411c-6.853 
    0-12.315 5.729-11.987 12.574zM256 432c-60.895 
    0-114.517-30.858-146.109-77.805l101.868 4.871c6.845.327 
    12.573-5.134 
    12.573-11.986v-47.412c0-6.627-5.373-12-12-12H12c-6.627 
    0-12 5.373-12 12V500c0 6.627 5.373 12 12 
    12h47.385c6.863 0 12.328-5.745 
    11.985-12.599l-4.129-82.575C112.725 470.166 180.405 
    504 256 504c121.187 0 222.067-86.924 243.704-201.824 
    1.388-7.369-4.308-14.176-11.807-14.176h-49.084c-5.57 
    0-10.377 3.842-11.676 9.259C408.593 374.592 339.069 
    432 256 432z"
    />
</svg>
times
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" width="16" height="16">
    <path
        d="M242.72 256l100.07-100.07c12.28-12.28 
    12.28-32.19 
    0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 
    0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 
    0L9.21 111.45c-12.28 12.28-12.28 32.19 0 
    44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 
    32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 
    12.28 44.48 0L176 322.72l100.07 100.07c12.28 
    12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 
    12.28-32.19 0-44.48L242.72 256z"
    />
</svg>
check
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
    <path
        d="M173.898 
    439.404l-166.4-166.4c-9.997-9.997-9.997-26.206
    0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 
    36.204 0L192 312.69 432.095 72.596c9.997-9.997 
    26.207-9.997 36.204 0l36.203 36.204c9.997 
    9.997 9.997 26.206 0 36.204l-294.4 
    294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
    />
</svg>
Using with FontAwesome SVG icons

Using with UIKit framework

The following example shows how to use SVG icons provided by UIKit framework:
refresh
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <path
        fill="none"
        stroke="#000"
        stroke-width="1.1"
        d="M17.08,11.15 C17.09,11.31 17.1,11.47 
        17.1,11.64 C17.1,15.53 13.94,18.69 
        10.05,18.69 C6.16,18.68 3,15.53 3,11.63 
        C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 
        11.71,4.73 12.46,5"
    ></path>
    <polyline fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline>
</svg>
close
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
    <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
</svg>
check
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
Using with UIKit framework

See also