title: JQuery Validation and Bootstrap 3 for same form-group - error and success classes for each field
body: <p>I have a Bootstrap 3 form where I have 2 fields side-by-side (e.g., First Name and Last Name), and in order to achieve this with BS3, I am putting both fields in the same form-group div, which works great.</p>
  
  <p>However, with the jQuery Validate script that I am using (v1.13.1), it adds has-error and has-success styling to the fields based on form-group, so if one of the fields is has-error (e.g., First Name), then both of the fields show the has-error styling (both First Name and Last Name) when it is only one of the fields that should have the class.</p>
  
  <p>I found a solution that seems like it's on the right track, but it still doesn't solve the issue: <a href="https://stackoverflow.com/questions/21765622/jquery-validation-and-bootstrap-3-for-same-form-group">JQuery Validation and Bootstrap 3 for same form-group</a> This code does not work, but you can see that it's on the right path to what I'm trying to do... basically, separate out the has-error and has-success styling (highlight vs unhighlight) for 2 different fields within the same form-group.</p>
  
  <p>Here is my simplified form HTML:</p>
  
  <pre><code>&lt;form class="form-horizontal" name="paymentInformation" id="paymentInformation" action="verifyOrder.cfm" method="post" role="form"&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="firstname" class="col-sm-2 control-label"&gt;First Name&lt;/label&gt;  
    &lt;div class="col-sm-4"&gt;
    &lt;input id="firstname" name="firstname" placeholder="First Name" class="form-control input-md" type="text" autofocus&gt;
    &lt;/div&gt;
    &lt;label for="lastname" class="col-sm-2 control-label"&gt;Last Name&lt;/label&gt;  
    &lt;div class="col-sm-4"&gt;
    &lt;input id="lastname" name="lastname" placeholder="Last Name" class="form-control input-md" type="text"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="submit" value="PROCEED TO THE NEXT STEP &amp;#xf054;" class="blueButton"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And, here is the simplified JS (adapted from comments here <a href="https://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin">Bootstrap 3 with jQuery Validation Plugin</a> ):</p>
  
  <pre><code>&lt;script&gt;
  $.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"
          }
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The error can be found in that if either the First Name OR the Last Name field is validated or not, then the other fields shows that it's validated or not (like an all-or-neither with the green and red for both fields).</p>
  
  <p>Here is a Fiddle showing the issue: <a href="http://jsfiddle.net/gamehendgeVA/m2o6c2vj/" rel="nofollow noreferrer">http://jsfiddle.net/gamehendgeVA/m2o6c2vj/</a> </p>
  
  <p>Any help is greatly appreciated!</p>
  
  <p>thanks!</p>