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

Showing icons in custom area

← ejemplos

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 triggering the init.field.fv event. The event handler is called after initializing the field which places the icon and error messages at desired position.

The feedback icon must be placed inside the field's parent element which has .form-group class in most cases. Otherwise, the plugin cannot find the icon element to show up after validating the field. 
<style type="text/css">
/* Custom the feedback icon styles */
#registerForm .form-control-feedback {
    position: static;
    display: inline-block;
}
</style>

<form id="registerForm">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>

    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
    </div>
</form>

<script>
$(document).ready(function() {
    $('#registerForm')
        // IMPORTANT: on('init.field.fv') must be declared
        // before calling .formValidation(...)
        .on('init.field.fv', function(e, data) {
            // $(e.target)  --> The field element
            // data.fv      --> The FormValidation instance
            // data.field   --> The field name
            // data.element --> The field element
            var $parent = data.element.parents('.form-group'),
                $icon   = data.element.data('fv.icon'),
                $label  = $parent.find('label');

            // Place the icon right after the label
            $icon.insertAfter($label);
        })
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: 'The username can only consist of alphabetical, number and underscore'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email is required and cannot be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                }
            }
        });
});
</script>

Despite that the feedback icons are placed at the particular area, you might need customized CSS styles to adjust their position:

<style type="text/css">
/* Custom the feedback icon styles */
#registerForm .form-control-feedback {
    position: static;
    display: inline-block;
}
</style>

Related ejemplos