引导验证：2 个字形重叠答案

【问题标题】：Bootstrap validation : 2 glyphicons are overlapping引导验证：2 个字形重叠
【发布时间】：2017-02-21 07:24:13
【问题描述】：

我验证了国家代码和实际手机号码这两个字段。我附上了截图。当给出正确的国家代码并且当时给出了无效的手机号码时，国家代码的正确刻度字形和交叉字形就会出现，它们相互重叠。我需要使用 css 或 js 删除国家代码的 glyphicon。任何帮助将不胜感激。

【问题讨论】：

添加产生问题的代码
@neophyte 我在下面添加了代码。我已经使用 jQuery 处理了它。

标签： css html twitter-bootstrap bootstrapvalidator

【解决方案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();
});

这样您就可以摆脱不需要时出现的额外 X。

【讨论】：

【解决方案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');

【讨论】：