如何更改 bootstrap 验证器图标位置

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/libs/bootstrap-validator/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 的建议编辑后，图标放置正确，但缺少表单字段右侧的圆角。

<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

我用下面的代码做到了

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

});

Answer 2

您应确保使用 Bootstrap v3.1.0 或更高版本要使用反馈图标，您可以使用此 css。我已经测试过了。有效 here

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

如何更改 bootstrap 验证器图标位置

How to change bootstrap validator icon position

javascript

jquery

css

twitter-bootstrap

bootstrapvalidator