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
-->
<i data-field="FIELD_NAME" class="fv-plugins-icon CSS_CLASSES"></i>

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:

<style>
    /*
fv-plugins-bootstrap is CSS class that will be added to the form automatically
when the Bootstrap plugin is used.
You might need to change that if your form is made in other CSS frameworks
*/
    .fv-plugins-bootstrap .form-group.inputGroupContainer .fv-plugins-icon,
    .fv-plugins-bootstrap .form-group.selectContainer .fv-plugins-icon {
        // Customize the icon's position
        right: -20px;
    }
</style>

<div class="form-group row inputGroupContainer">
    <!-- Input group element -->
    ...
</div>

<div class="form-group row selectContainer">
    <!-- Select element -->
    ...
</div>

Adjusting icon position

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:

<style>
    /* Hide the icon for phoneNumber field */
    .fv-plugins-icon[data-field='phoneNumber'] {
        display: none;
    }
</style>

<input name="phoneNumber" />

Adjusting icon position

Hiding icon for particular field

See also