Javascript 如何更改引导验证程序图标位置

我正在尝试验证表单字段。 要获得此结果，请执行以下操作：

我尝试了一个简单的解决方案，并给了我几乎需要的结果，但图标没有正确放置。我可以用JS更改图标

---

我用下面的代码做的

HTML

---

我用下面的代码做的

HTML

---

您应该确保使用Bootstrap v3.1.0或更高版本来使用反馈图标，然后才能使用此css。我已经测试过了。它起作用了

---

您应该确保使用Bootstrap v3.1.0或更高版本来使用反馈图标，然后才能使用此css。我已经测试过了。它起作用了

---

谢谢你，查看我的编辑结果和角落里的小问题。有什么建议吗？欢迎：）我没看到你的编辑。你能在这里添加链接吗谢谢，请看我的编辑结果和角落里的小问题。有什么建议吗？欢迎：）我没看到你的编辑。你能在这里添加链接吗

<div class="form-group row">
     <label for="datum" class="col-md-2 col-form-label">Datum toolbox</label>
    <div class="col-md-2 input-group has-warning" id="div_datum">
      <input type="text" class="form-control datepicker" id="datum" name="datum" onclick="validate()"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="datum_status"></span><small class="form-text text-muted">Vul datum in</small>
    </div>
</div>

<div class="form-group row has-danger">
     <label for="datum" class="col-md-2 col-form-label" for="datum2">Datum toolbox</label>
    <div class="col-md-2 input-group has-warning" id="div_datum2" for="datum2">
      <input type="text" class="form-control form-control-danger datepicker" id="datum2" name="datum2" onclick="validate()"><small class="form-text text-muted">Vul datum in</small>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#tryitForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            datum2: {
                validators: {
                    notEmpty: {
                        message: 'Please fill in'
                    }
                }
            },
        },
    });
});
</script>

<div class="form-group row">
     <label for="datum" class="col-md-2 col-form-label">Datum toolbox</label>
    <div class="col-md-2 input-group has-warning" id="div_datum">
      <input type="text" class="form-control datepicker" id="datum" name="datum" onclick="validate()"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="datum_status"></span>
    </div>
</div>

.form-control{
  -webkit-border-radius: 1;
     -moz-border-radius: 1;
          border-radius: 1;
}

 <form> 
  <div id="d" class="">
  <div class="col-sm-10 input-group">
   <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
  </span>
    <input type="text" class="form-control" id="fname" 
   placeholder="UserName" style="width: 295px;"><span id="s" class="" style="top: -2px;left: 305px;"></span> <!--<p data-toggle="popover" title="Name" data-content="Empty field" >-->
  </div>
</div>      


<div id="l" class="">    

  <div class="col-sm-10 input-group"> 
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
 <input type="text" class="form-control" id="email2" placeholder="Email" style="width: 295px;"><span id="b" class="" style="top: -2px;left: 305px;"></span>
  </div>
</div>  
</form>

$(document).ready(function(){

$("#fname").focusout(function(cv){
var x= $("#fname").val();

if(x=="")
{   
$("#d").removeClass("form-group has-success has-feedback").addClass("form-
 group has-error has-feedback");
$("#s").removeClass("glyphicon glyphicon-ok form-control-
 feedback").addClass("glyphicon glyphicon-remove form-control-feedback");   
 $("#d").css('border-color', '#a94442 !important'); 

}    
else{  
$("#d").removeClass("form-group has-error has-feedback").addClass("form-
group has-success has-feedback");   

$("#s").removeClass("glyphicon glyphicon-remove form-control-
feedback").addClass("glyphicon glyphicon-ok form-control-feedback");
}

});

.form-control-feedback{
  position:relative !important;
  float: left;
  left:5px;
  top:-3px !important;
}