Search code examples
csshtmltwitter-bootstrapbootstrapvalidator

Bootstrap validation : 2 glyphicons are overlapping

I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.

Bootstrap validation glyphicons overlapping

Solution

  • I have found the answer. I have done it by using jQuery.

    My actual HTML was as below,

    <div class="input-group">
     <div class="input-group-addon">+</div>
     <input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code"> 
     <input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>

    Bootstrap creates glyphicons for correct and wrong below the html as below,

    <i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>

    So I have added following one line code to remove correct and wrong glyphicons for country code field,

    $("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');