javascript - 如何更改 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 的建议编辑后，图标放置正确，但缺少表单字段右侧的圆 Angular 。

<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

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

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