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:

<style>
    .fv-plugins-icon[data-field='username'],
    .fv-plugins-icon[data-field='email'] {
        display: inline-block;
        position: static;
        height: auto;
        line-height: normal;
    }
</style>

<input name="username" />
...
<input name="email" />

Showing icons in custom area

See also