css - 引导验证：2 个字形重叠

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');