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

我有一个简单的表格，

Name

和

Email

。我得到正确的验证错误，但没有得到输入字段内的图标。我在右上角碰到一个十字图标。你能帮我一下吗

我得到了输出

我需要这样的输出

$（'#myform'）。验证（{
规则：{
姓名：{
最小长度：3，
最大长度：15，
必填项：true
},
电邮：{
要求：正确，
电子邮件：真的
},
},
亮点：功能（元素）{
var id_attr=“#”+$（元素）.attr（“id”）+“1”；
$（元素）。最近（'.form group'）。removeClass（'has-success'）。addClass（'has-error'）；
$（id_attr）.removeClass（'glyphicon-ok'）.addClass（'glyphicon-remove'）；
},
取消高亮显示：功能（元素）{
var id_attr=“#”+$（元素）.attr（“id”）+“1”；
$（元素）。最近（'.form group'）。removeClass（'has-error'）。addClass（'has-success'）；
$（id_attr）.removeClass（'glyphicon-remove'）.addClass（'glyphicon-ok'）；
},
errorElement:'span'，
errorClass:“帮助阻止”，
errorPlacement:函数（错误，元素）{
if（元素长度）{
错误。插入符（元素）；
}否则{
错误。插入符（元素）；
}
} 
});
使用输入组将图标链接到输入字段，然后在默认情况下隐藏范围并在验证函数中显示

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



工作小提琴：
使用引导的十字图标

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合并并删除重要部分。在标记中也做了一些小调整


$（'#myform'）。验证（{
规则：{
姓名：{
最小长度：3，
最大长度：15，
必填项：true
},
电邮：{
要求：正确，
电子邮件：真的
},
},
亮点：功能（元素）{
var id_attr=“#”+$（元素）.attr（“id”）+“1”；
$（元素）。最近（'.form group'）。removeClass（'has-success'）。addClass（'has-error'）；
$（id_attr）.removeClass（'glyphicon-ok'）.addClass（'glyphicon-remove'）；
},
取消高亮显示：功能（元素）{
var id_attr=“#”+$（元素）.attr（“id”）+“1”；
$（元素）。最近（'.form group'）。removeClass（'has-error'）。addClass（'has-success'）；
$（id_attr）.removeClass（'glyphicon-remove'）.addClass（'glyphicon-ok'）；
},
errorElement:'span'，
errorClass:“帮助阻止”，
errorPlacement:函数（错误，元素）{
if（元素长度）{
错误。插入符（元素）；
}否则{
错误。插入符（元素）；
}
} 
});
.field容器{
浮动：左；
位置：相对位置；
}
.表格控制反馈{
线高：20px；
字体大小：20px；
线高：20px！重要；
高度：20px！重要；
}
.图标ok{
颜色：#4FAC34；
}
.图标删除{
颜色：#FF0000；
}

x
x
简单的解决方案是为输入设置一个错误的背景图标，并根据错误状态控制其可见性。我在HTML中没有看到任何
。form group
，我想知道为什么要执行类似
var id\u attr=“#“+$（元素）.attr（“id”）+“1”这样的操作。如果将输入包装在
输入组中
，则可以使用
$（父项）.find（“.form control feedback”）选择子项
抱歉，Shadowfox先生。仍然是同一个问题。感谢再次回复Shadowfox先生。我有您现在添加的代码。我必须根据上面的图片进行设置。抱歉，Taniya，我仍然在右上角显示图标。因为您的表单占用了页面的全部宽度。请将您的表单放在我收到的同一个问题中。您能制作JSf吗为我打电话？这样我就可以很容易地理解了谢谢你的回复aavrug先生。我检查了你的输出，我在输入字段外得到了十字符号。现在对我有效。我尝试了位置：绝对；顶部：10px；右侧：16px；课堂表单控制反馈。效果很好。我需要一个帮助，我必须更改十字符号的颜色。如果细节正确，请与co联系lor绿色或红色。你能帮我吗？这应该用JS来完成，或者如果你在成功验证的输入上添加任何类型的类，那么你可以使用CSS来玩这个类。你能帮我创建任何链接吗？这样我就可以引用它了。添加了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
 }