FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Adjusting feedback icon position

Examples

In some cases, the feedback icons aren't shown properly. By default, Bootstrap defines feedback icon position as following:

.has-feedback .form-control-feedback {
    top: 25px;
    right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
    top: 0;
    right: 15px;
}

By customizing the value of top and right properties, you can adjust the feedback icon to deserved position.

Below is some popular usages.

Button group

<style type="text/css">
#buttonGroupForm .btn-group .form-control-feedback {
    top: 0;
    right: -30px;
}
#productForm .inputGroupContainer .form-control-feedback,
#productForm .selectContainer .form-control-feedback {
    top: 0;
    right: -15px;
}
#profileForm .form-control-feedback {
    top: 35px;
    right: 0px;
}
</style>

<form id="buttonGroupForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Gender</label>
        <div class="col-xs-9">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="gender" value="male" /> Male
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="gender" value="female" /> Female
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="gender" value="other" /> Other
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Languages</label>
        <div class="col-xs-9">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="checkbox" name="languages[]" value="english" /> English
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="languages[]" value="german" /> German
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="languages[]" value="french" /> French
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="languages[]" value="russian" /> Russian
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="languages[]" value="italian"> Italian
                </label>
            </div>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#buttonGroupForm').formValidation({
        framework: 'bootstrap',
        excluded: ':disabled',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            'languages[]': {
                validators: {
                    choice: {
                        min: 1,
                        max: 2,
                        message: 'Please choose 1 - 2 languages you can speak'
                    }
                }
            }
        }
    });
});
</script>

Input group

<style type="text/css">
#productForm .inputGroupContainer .form-control-feedback,
#productForm .selectContainer .form-control-feedback {
    top: 0;
    right: -15px;
}
</style>

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

    <div class="form-group">
        <label class="col-xs-3 control-label">Amount</label>
        <div class="col-xs-3 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon">&#8364;</span>
                <input type="text" class="form-control" name="amount" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Color</label>
        <div class="col-xs-3 selectContainer">
            <select class="form-control" name="color">
                <option value="">Choose a color</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="red">Red</option>
                <option value="yellow">Yellow</option>
                <option value="white">White</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Size</label>
        <div class="col-xs-3 selectContainer">
            <select class="form-control" name="size">
                <option value="">Choose a size</option>
                <option value="S">S</option>
                <option value="M">M</option>
                <option value="L">L</option>
                <option value="XL">XL</option>
            </select>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#productForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            price: {
                validators: {
                    notEmpty: {
                        message: 'The price is required'
                    },
                    numeric: {
                        message: 'The price must be a number'
                    }
                }
            },
            amount: {
                validators: {
                    notEmpty: {
                        message: 'The amount is required'
                    },
                    numeric: {
                        message: 'The amount must be a number'
                    }
                }
            },
            color: {
                validators: {
                    notEmpty: {
                        message: 'The color is required'
                    }
                }
            },
            size: {
                validators: {
                    notEmpty: {
                        message: 'The size is required'
                    }
                }
            }
        }
    });
});
</script>

If changing the css positioning of the feedback icon isn't enough, you might have to look at the Showing icons in custom area example.