如何更改引導驗證器圖標位置

Question

我想驗證表單域。 爲了得到這樣的結果：

我已經嘗試了簡單的解決方案，並給了我幾乎需要結果，但圖標放置不正確。我可以在這裏與JS

<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> 

任何建議更改圖標？

試用Bootstrap插件完全沒有結果。

<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> 

我已經添加了以下文件： //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css //cdnjs.cloudflare。 COM/AJAX /庫/引導，識別/ 0.4.5/JS/bootstrapvalidator.min.js

而這額外的JS代碼：

<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> 

user8175473圖標的建議編輯後正確放置雖錯過了右側sid上的圓角表單域的e。

<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> 

即使加上這對CSS沒有改變這一點。

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

Answer 1

您應該確保您使用引導V3.1.0或以上版本使用反饋圖標，然後你可以使用這個CSS。我測試過了。它的工作原理here

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

Answer 2

我用下面的代碼使其

HTML

<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> 

這裏是我的Java腳本

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

});