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

我有一个Bootstrap 3表单，其中并排有2个字段（例如，名字和姓氏），为了通过BS3实现此目的，我将两个字段都放在同一个表单组div中，伟大的。

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

我找到了一个正确的解决方案，但仍然无法解决问题：同一表单组的JQuery验证和Bootstrap 3此代码不起作用，但是您可以看到它在正确的路径上我要尝试执行的操作...基本上，为同一个表单组中的2个不同字段分离出has-error和has-success样式（突出显示与不突出显示）。

这是我的简化表单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（改编自带有jQuery Validation Plugin的Bootstrap 3的注释）：

<script>
$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
        error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
$("#paymentInformation").validate({
    rules: {
        'firstname': {
            required: true,
            maxlength: 200
        },
        'lastname': {
            required: true,
            maxlength: 200
        }
    },
   messages: {
        'firstname': {
            required: "Enter your First Name.",
            maxlength: "Your First Name cannot exceed 200 characters"
        },
        'lastname': {
            required: "Enter your Last Name.",
            maxlength: "Your Last Name cannot exceed 200 characters"
        }
    }
});
</script>

可以发现错误，因为无论“名”或“姓”字段是否经过验证，然后其他字段都表明它是否经过验证（就像两个字段的绿色和红色为全有还是全无）。

这是显示问题的小提琴：http : //jsfiddle.net/gamehendgeVA/m2o6c2vj/

任何帮助是极大的赞赏！

谢谢！