如何使用 Bootstrap 和 jQuery 在输入字段内显示错误图标？

Question

我有一个简单的表格，Name 和 Email。我收到正确的验证错误，但没有在输入字段中获得图标。我得到了右上角的十字图标。你能帮我解决这个问题吗？

我得到输出

我需要这样的输出

$('#myform').validate({    
    rules: {
        name: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
         email: {
            required: true,
            email: true
        },
    },
    highlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
    },
    unhighlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
    },
    errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        } 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" type="text/javascript"></script>


<form class="form-horizontal" id="myform">
<input type="text" name="name"  placeholder="name" id="name">
<span class="glyphicon form-control-feedback" id="name1"></span>

<input type="email" name="email" id="email"  placeholder="email"><span id="status"></span>
<span class="glyphicon form-control-feedback" id="email1"></span>

</form>

Answer 1

只需将样式与您的 CSS 合并并删除重要部分。还要对您的标记进行一些调整。

$('#myform').validate({    
    rules: {
        name: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
         email: {
            required: true,
            email: true
        },
    },
    highlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
    },
    unhighlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
    },
    errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        } 
 });

.field-container {
  float: left;
  position: relative;
}

.form-control-feedback {
  line-height: 20px;
  font-size: 20px;
  line-height: 20px !important;
  height: 20px !important;
}
.glyphicon-ok {
  color: #4FAC34;
}
.glyphicon-remove {
  color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" type="text/javascript"></script>


<form class="form-horizontal" id="myform">
<div class="field-container">
<input type="text" name="name"  placeholder="name" id="name">
<span class="glyphicon form-control-feedback" id="name1">x</span>
</div>
<div class="field-container">
<input type="email" name="email" id="email"  placeholder="email"><span id="status"></span>
<span class="glyphicon form-control-feedback" id="email1">x</span>
</div>
</form>

Answer 2

使用bootstrap的十字图标

HTML：

<div class="form-group">
     <input type="text" name="name"  placeholder="name" id="name">
     <span class="glyphicon glyphicon-remove cross" aria-hidden="true"></span>
 </div>

CSS：

.form-group{
    position:relative;
 }

 span.glyphicon-remove.cross{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;// put the proper position of that cross from top
    right: 0;// put the proper position of that cross from right
 }

Answer 3

使用输入组将图标链接到输入字段，然后默认隐藏跨度并将其显示在验证函数中。

<div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon"><i class="glyphicon glyphicon-times"></i></span>
    </div>

工作小提琴：https://jsfiddle.net/084w9en1/1/