Javascript 输入字段的验证与图标一起发送错误消息

我不明白为什么所有的错误信息都出现在一起。

我需要这样。。

好的，我能做到。这是我的演示代码

$（“#联系方式”）。验证({
规则：{
全名：{
最小长度：4，
必填项：true
},
用户名：{
要求：正确，
电子邮件：真的
},
密码：{
最小长度：6，
必填项：true
},
确认密码：{
最小长度：6，
要求：正确，
equalTo:“#密码”
},
流动电话：{
最小长度：11，
最大长度：11，
要求：正确，
数字：对
},
条件：{
必填项：true
}
},
亮点：功能（元素）{
var id_attr=“#”+$（元素）.attr（“id”）+“1”；
$（元素）。最近（'.control group'）。removeClass（'has-success'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
var id_attr=“#”+$（元素）.attr（“id”）+“1”；
$（元素）。最近（'.control group'）。removeClass（'has-error'）。addClass（'has-success'）；
},
errorPlacement:函数（错误，元素）{
错误.insertAfter（element.parent（））；
}
});
label.error{
浮子：对！很重要；
}
.控件。错误{
颜色：红色！重要；
}
.控件。有效{
颜色：绿色！重要；
}

AGD跟踪


























提交


我同意这个建议

不确定您是否正在查找此行为：

检查当前元素是否在
突出显示
和
错误放置
功能中聚焦，以便只有当前聚焦的元素显示错误

highlight: function (element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    if($(element).is(":focus")){
        $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
    }
},

errorPlacement: function (error, element) {
    if($(element).is(":focus")) {
        error.insertAfter(element.parent());
    }
}

Fiddle:
你能提供一个Fiddle链接吗？有这么多代码要读。你能去除一些不必要的代码吗？验证是在keyup上添加到表单中的，这似乎是所有输入都得到验证的原因。但是为什么所有错误消息都在一起？不，我需要它，当我点击任何输入字段进行写写时，只有它会给我错误消息，其他字段应该是正常的。