Bootstrap-Validierung: 2 Glyphicons sind überlappend

Question

Ich habe Validierung für 2 Felder, die Ländercode und tatsächliche Handynummer sind. Ich habe einen Screenshot angehängt. Wenn der korrekte Ländercode angegeben ist und ungültig ist, wird zu diesem Zeitpunkt kein Handy-Tick-Glyphon für Ländercode und Kreuz-Glyphicon angegeben, die sich gegenseitig überlappen. Ich muss Glyphicon für Ländercode entfernen, indem Sie css oder js verwenden. Jede Hilfe wird geschätzt.

Answer 1

Ich habe die Antwort gefunden. Ich habe es mit jQuery gemacht.

Meine eigentlichen HTML wie unten war,

<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 wie unten glyphicons für richtig und falsch unter dem HTML erstellt,

<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 habe ich hinzugefügt folgende eine Zeile Code zu entfernen, zu korrigieren und Falsche Glyphicons für Ländercode Feld,

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

Answer 2

Wenn Sie jQuery verwenden:

sagen wir, Sie

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

würden Sie anrufen:

$('.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(); 
}); 

diese Weise können Sie von der zusätzlichen loswerden Xes erscheint, wenn Sie nicht brauchen.