同一表单组的JQuery验证和引导3-每个字段的错误和成功类

我有一个bootstrap3表单，其中有两个字段并排（例如，名字和姓氏），为了使用BS3实现这一点，我将两个字段放在同一个表单group div中，这非常有效

但是，对于我正在使用的jQuery验证脚本（v1.13.1），它会将has error和has success样式添加到基于表单组的字段中，因此如果其中一个字段是has error（例如，First Name），那么这两个字段都会显示has error样式（First Name和Last Name）当只有一个字段应该具有该类时

我找到了一个似乎在正确轨道上的解决方案，但它仍然无法解决问题：此代码不起作用，但您可以看到它正走在我尝试做的正确道路上。。。基本上，为同一表单组中的两个不同字段分离出has error和has success样式（高亮显示vs unhighlight）

这是我的简化格式HTML：

<form class="form-horizontal" name="paymentInformation" id="paymentInformation" action="verifyOrder.cfm" method="post" role="form">
<div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">First Name</label>  
  <div class="col-sm-4">
  <input id="firstname" name="firstname" placeholder="First Name" class="form-control input-md" type="text" autofocus>
  </div>
  <label for="lastname" class="col-sm-2 control-label">Last Name</label>  
  <div class="col-sm-4">
  <input id="lastname" name="lastname" placeholder="Last Name" class="form-control input-md" type="text">
  </div>
</div>
<input type="submit" value="PROCEED TO THE NEXT STEP &#xf054;" class="blueButton">
</form>

名字
姓

下面是简化的JS（根据此处的注释改编）：

$.validator.setDefaults({
错误元素：“span”，
errorClass:“帮助阻止”，
亮点：功能（元素）{
$（元素）。最近（'.form group'）。removeClass（'has-success'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form group'）。removeClass（'has-error'）。addClass（'has-success'）；
},
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length | | | element.prop（'type'）=='checkbox'| | | element.prop（'type'）=='radio'））{
错误.insertAfter（element.parent（））；
}否则{
错误。插入符（元素）；
}
}
});
$（“#付款信息”）.validate({
规则：{
“名字”：{
要求：正确，
最大长度：200
},
“姓氏”：{
要求：正确，
最大长度：200
}
},
信息：{
“名字”：{
必填：“输入您的名字。”，
maxlength:“您的名字不能超过200个字符”
},
“姓氏”：{
必填：“输入您的姓氏。”，
maxlength:“您的姓氏不能超过200个字符”
}
}
});

错误在于，如果“名字”或“姓氏”字段已验证或未验证，则其他字段将显示其已验证或未验证（如两个字段均为绿色和红色的all或NOTE）

下面是一把小提琴，展示了这个问题：

非常感谢您的帮助

---

谢谢

两个输入都放在单独的

元素中。因此，您可以替换这些行：

$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
// ...
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');

有了这些：

$(element).parent().removeClass('has-success').addClass('has-error');
// ...
$(element).parent().removeClass('has-error').addClass('has-success');

。。或这些（与上述相同，但与类别相关）：

---

或者，如果由于某种原因不能影响输入父级上的类，或者不能基于父级元素（例如，您的项目正在开发中，或者得到频繁更新），则可以确保使用将错误/成功类正确应用于字段。您的字段被包装到动态创建的

元素中，并具有适当的（错误/成功）类：

突出显示：函数（元素）{
$（element）.parent（）是（“.has success，.has error”）？
$（element）.parent（）.removeClass（'has-success'）。addClass（'has-error'）：
$（元素）。换行（“”）；
},
取消高亮显示：功能（元素）{
$（element）.parent（）是（“.has success，.has error”）？
$（element）.parent（）.removeClass（'has-error'）.addClass（'has-success'）：
$（元素）。换行（“”）；
}

---

哇，太棒了！！！“家长”一班工作得很好，我也能看出一班也是如此。非常感谢你的帮助和教我这个！：）太棒了，你太好了！！我更喜欢这个解决方案，效果很好！非常感谢你帮助我！：）

$(element).parent().removeClass('has-success').addClass('has-error');
// ...
$(element).parent().removeClass('has-error').addClass('has-success');

$(element).closest('.col-sm-4').removeClass('has-success').addClass('has-error');
// ...
$(element).closest('.col-sm-4').removeClass('has-error').addClass('has-success');

highlight: function(element) {
    $(element).parent().is('.has-success, .has-error') ? 
        $(element).parent().removeClass('has-success').addClass('has-error') : 
        $(element).wrap('<span class="has-error"></span>');
},
unhighlight: function(element) {
    $(element).parent().is('.has-success, .has-error') ? 
        $(element).parent().removeClass('has-error').addClass('has-success') : 
        $(element).wrap('<span class="has-success"></span>');
}