Using the form validation jquery library (jqBootstrapValidation), it is possibly to dynamically assign icons to input elements. The type of icons displayed are controlled by the icon property shown below. The problem I ran into was the ALIGNMENT of these icons. They were either wrapping over or not aligning correctly with the input element. To get aroudn this, I had to use custom CSS – and surround each input element with a div that leveraged that CSS.

.formValidation({

message: 'This value is not valid',

//err: {

//    container: 'tooltip'

//},

framework: 'bootstrap',

icon: {

required: 'glyphicon glyphicon-asterisk',

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'
} 
The following CSS will left align the glyphicons (just surround the input element with a div that uses the inner-addon left-addon class):
<div class="inner-addon left-addon"><input type="text" class="form-control" style="white-space:nowrap" name="test" id="test" placeholder=""></div>

This relies on the custom CSS shown below
/* enable absolute positioning */.inner-addon {position: relative;}/* style icon */.inner-addon .glyphicon {position: absolute;padding:10px;pointer-events: none;}/* align icon */.left-addon .glyphicon  {left:0px;}.right-addon .glyphicon {right:0px;}/* add padding  */.left-addon input  {padding-left:30px;}.right-addon input {padding-right:30px;}

Anuj holds professional certifications in Google Cloud, AWS as well as certifications in Docker and App Performance Tools such as New Relic. He specializes in Cloud Security, Data Encryption and Container Technologies.

Initial Consultation

Anuj Varma – who has written posts on Anuj Varma, Hands-On Technology Architect, Clean Air Activist.

 Twitter Linkedin