This site contains the document for old version. Please upgrade to the latest version v1.0.0

Clearing field when clicking the icon

The following example shows how to clear the field when clicking the feedback icon.

In order to archive this, there are some useful things for us:

Trigger the init.field.fv event which is called after the plugin initializes the fields, such as prepare the feedback icon and message elements
Handle the feedback icon's click event
Using the resetField() method to clear the field

You also need to set pointer-events: auto style for the icon since it's reset to none by Bootstrap:

#productForm .form-control-feedback {
    pointer-events: auto;
}

<style type="text/css">
#productForm .form-control-feedback {
    pointer-events: auto;
}
#productForm .form-control-feedback:hover {
    cursor: pointer;
}
</style>

<form id="productForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Name</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-5">
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Price</label>
        <div class="col-xs-3">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" name="price" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Quantity</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="quantity" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Add product</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#productForm')
        // IMPORTANT: You must declare .on('init.field.fv')
        // before calling .formValidation(options)
        .on('init.field.fv', function(e, data) {
            // data.fv      --> The FormValidation instance
            // data.field   --> The field name
            // data.element --> The field element

            var $parent = data.element.parents('.form-group'),
                $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + data.field + '"]');

            // You can retrieve the icon element by
            // $icon = data.element.data('fv.icon');

            $icon.on('click.clearing', function() {
                // Check if the field is valid or not via the icon class
                if ($icon.hasClass('glyphicon-remove')) {
                    // Clear the field
                    data.fv.resetField(data.element);
                }
            });
        })

        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: 'The description is required'
                        },
                        stringLength: {
                            max: 300,
                            message: 'The description must be less than 300 characters long'
                        }
                    }
                },
                price: {
                    validators: {
                        notEmpty: {
                            message: 'The price is required'
                        },
                        numeric: {
                            message: 'The price must be a number'
                        }
                    }
                },
                quantity: {
                    validators: {
                        notEmpty: {
                            message: 'The quantity is required'
                        },
                        integer: {
                            message: 'The quantity must be a number'
                        }
                    }
                }
            }
        });
});
</script>