如何更改引导验证器图标位置答案

【问题标题】：How to change bootstrap validator icon position如何更改引导验证器图标位置
【发布时间】：2017-06-17 09:16:56
【问题描述】：

我正在尝试验证表单字段。要得到这个结果：

我尝试了一个简单的解决方案，几乎得到了所需的结果，但图标放置不正确。我可以用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;
}

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootstrapvalidator

【解决方案1】：

您应该确保您使用 Bootstrap v3.1.0 或更高版本。要使用反馈图标，您可以使用这个 css。我已经测试过了。它可以工作here

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

【讨论】：

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

【解决方案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");
}

});

【讨论】：