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

Question

我有一个简单的表单Name和Email。我正在获得验证错误，但没有在输入字段中获取图标。我正在右上角交叉图标。你能帮帮我吗？

我正在获得输出

我需要这样的输出

＆＃13;

＆＃13;

$('#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);
            }
        } 
 });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

foreach(var total in totals)
{
   Console.WriteLine ($"{total.Device} = {total.Total}");
}
------------------
Device1 = 45
Device2 = 5
Device3 = 5

$('#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;
}

Answer 2

使用输入组将图标链接到输入字段，然后默认隐藏范围并将其显示在验证功能中。

<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/

Answer 3

使用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
 }