Bootstrap验证：2个glyphicons重叠

Question

我对2个字段进行了验证，这些字段是国家/地区代码和实际的手机号码。我附上了截图。当给出正确的国家代码并且当时给出无效的移动号码时，国家代码和交叉字形的正确刻度字形相互重叠。我需要使用css或js删除国家/地区代码的glyphicon。任何帮助将不胜感激。

Answer 1

如果你正在使用jQuery：

让我们说你有

<div class="container">
  <div class="form">
    form content...
  </div>
</div>

你会打电话给：

$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
  if (i!=0) $(this).remove();
});

这样你就可以摆脱不需要的额外Xes。

Answer 2

我找到了答案。我是通过使用jQuery完成的。

我的实际HTML如下，

<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在html下创建正确和错误的字形，如下所示，

<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>

所以我添加了以下一行代码来删除国家/地区代码字段的正确和错误的字形，

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