Bootstrap 验证：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();
});

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

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

Bootstrap 验证：2 个字形重叠

Bootstrap validation : 2 glyphicons are overlapping

css

html

twitter-bootstrap

bootstrapvalidator