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

您应确保使用Bootstrap 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");
}

});

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

2 个答案: