Javascript jQuery验证红色边框未立即显示

我正在使用jQuery验证插件，直到我发现一个小问题为止，它一直都很好，但是它对UX有很大的影响。注意：其他表单验证工作正常。下面是我启动jQuery验证的脚本

$（文档）.ready（函数（）{
//jquery验证插件
$（“#用户注册表格”）。验证({
规则：{
全名：{
最小长度：3，
必填项：true
},
电邮：{
电子邮件：真的
},
密码：{
最小长度：8，
必填项：true
},
伯恩代：{
必填项：true
},
博恩蒙特：{
必填项：true
},
新生儿：{
必填项：true
}
},
亮点：功能（元素）{
$（元素）.parents（'.form group'）.addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）.parents（'.form group'）.removeClass（'has-error'）；
},
errorElement:'span'，
errorClass:“验证错误消息帮助阻止表单帮助程序粗体”，
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length）{
错误.insertAfter（element.parent（））；
}否则{
错误。插入符（元素）；
}
}
});
}); //文件结束准备好了吗

唐加拉希尔
*
唐加尔
布朗
大运

单击“提交”时，其他表单将被验证并更改为红色边框，包括错误消息，然后出现问题： 对于我的生日表单（有3个

字段），当我单击提交时，颜色不会立即变为红色

但是当我单击其他任何地方时，颜色开始改变，但它突出显示了所有内容（可能是因为它影响了整个.form组）

注: 只有当我没有完全填写生日时才会出现这个问题，但是当我没有选择任何日期时，边框的颜色效果很好

这里是指向JSFIDLE的链接

如果我需要补充更多细节，请告诉我，我非常感谢您的帮助：）

希望不要太晚。 发生此错误的原因是您通过“highlight”方法向包装器添加class.has错误，但随后立即将其删除，因为您有触发“unhighlight”方法的有效字段

只需将.has错误添加到直接父级，而不是整个包装器

  highlight: function(element) {
    $(element).parent().addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).parent().removeClass('has-error');
  },

更新的JSFIDLE

---

如果可能的话，请将示例演示链接放入jsfiddle中。我在你的fiddle中发现了一个引导/jQuery错误。肖恩，我检查过了，没有发现任何错误）我能帮忙吗？