title: Why does jQuery Validate Adds Error to a Valid Field?
body: <p>I'm working on a form having several fields and when "onblur" occurs jquery validate is adding the error class/label to a valid field. </p>
  
  <p>This is my form html</p>
  
  <pre><code>&lt;div id="diaAddCustomer" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"&gt;
  &lt;div class="modal-dialog" style="background-color: #fff; width: 650px;"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;nbsp;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Add New Customer&lt;/h4&gt;
      &lt;/div&gt;
      &lt;form class="form-horizontal" id="frmAddCustomer" name="frmAddCustomer" novalidate&gt;
          &lt;input type="hidden" id="addCustomerPersonID" name="addCustomerPersonID" value=""&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerName"&gt;Name:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerName" name="addCustomerName" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;h4&gt;Billing Address&lt;/h4&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerAdd1"&gt;Address:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerAdd1" name="addCustomerAdd1" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerAdd2"&gt;&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerAdd2" name="addCustomerAdd2" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerCity"&gt;City:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerCity" name="addCustomerCity" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerState"&gt;State:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerState" name="addCustomerState" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;label for="addCustomerZip"&gt;Zip:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerZip" name="addCustomerZip" value="" onkeyup="valNumber($(this))"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerPhone"&gt;Phone:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerPhone" name="addCustomerPhone" onkeyup="valNumber($(this))" onblur="formatPhone($(this))" onfocus="removePhoneFormat($(this))" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;label for="addCustomerPhoneType"&gt;Type:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;select class="form-control input-sm" id="addCustomerPhonetype" name="addCustomerPhoneType"&gt;
                          &lt;option value=""&gt; Please Select...&lt;/option&gt;
                          &lt;option value="cell"&gt; Cell&lt;/option&gt;
                          &lt;option value="fax"&gt; Fax&lt;/option&gt;
                          &lt;option value="phone"&gt; Phone&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerEmail"&gt;Email:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerEmail" name="addCustomerEmail" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;h4&gt;Shipping Address &lt;span style="font-size: 10pt;"&gt;&lt;input type="checkbox" id="ckbSameShip" ng-click="setShipAddress()"&gt; Same As Billing&lt;/span&gt;&lt;/h4&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerShipAdd1"&gt;Address:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerShipAdd1" name="addCustomerShipAdd1" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerShipAdd2"&gt;&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerShipAdd2" name="addCustomerShipAdd2" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerShipCity"&gt;City:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerShipCity" name="addCustomerShipCity" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerShipState"&gt;State:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerShipState" name="addCustomerShipState" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;label for="addCustomerShipZip"&gt;Zip:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerShipZip" name="addCustomerShipZip" value="" onkeyup="valNumber($(this))"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label for="addCustomerShipPhone"&gt;Phone:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;input type="text" class="form-control input-sm" id="addCustomerShipPhone" name="addCustomerShipPhone" onkeyup="valNumber($(this))" onblur="formatPhone($(this))" onfocus="removePhoneFormat($(this))" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;label for="addCustomerShipPhoneType"&gt;Type:&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;select class="form-control input-sm" id="addCustomerShipPhonetype" name="addCustomerShipPhoneType"&gt;
                          &lt;option value=""&gt; Please Select...&lt;/option&gt;
                          &lt;option value="cell"&gt; Cell&lt;/option&gt;
                          &lt;option value="fax"&gt; Fax&lt;/option&gt;
                          &lt;option value="phone"&gt; Phone&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-sm btn-primary"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Add Customer&lt;/button&gt;
              &lt;button type="button" class="btn btn-sm btn-default" data-dismiss="modal"&gt;&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt; Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my validation script</p>
  
  <pre><code>$scope.openAddCustomerWdw = function(pID){
          $("#diaAddCustomer").on("shown.bs.modal", function(){
              $("#addCustomerPersonID").val(pID);
              $("#addCustomerName").val("");
              $("#addCustomerAdd1").val("");
              $("#addCustomerAdd2").val("");
              $("#addCustomerCity").val("");
              $("#addCustomerState").val("");
              $("#addCustomerZip").val("");
              $("#addCustomerPhone").val("");
              $("#addCustomerPhoneType").val("");
              $("#addCustomerEmail").val("");
              $("#addCustomerShipAdd1").val("");
              $("#addCustomerShipAdd2").val("");
              $("#addCustomerShipCity").val("");
              $("#addCustomerShipState").val("");
              $("#addCustomerShipZip").val("");
              $("#addCusomterShipPhone").val("");
              $("#addCustomerShipPhoneType").val("");
              $("#addCustomerName").select();
          });
          $("#diaAddCustomer").modal("show");
          $("#frmAddCustomer").validate({
              debug: true,
              rules: {
                  addCustomerName: { required: true },
                  addCustomerAdd1: { required: true },
                  addCustomerCity: { required: true },
                  addCustomerState: { required: true },
                  addCustomerZip: { required: true },
                  addCustomerPhone: { required: true, phoneUS: true },
                  addCustomerPhoneType: { required: true },
                  addCustomerEmail: { required: function(){
                      return $("#addCustomerEmail").length &gt; 0;
                  }, email: true },
                  addCustomerShipAdd1: { required: true },
                  addCustomerShipCity: { required: true },
                  addCustomerShipZip: { required: true },
                  addCustomerShipPhone: { required: true, phoneUS: true },
                  addCustomerShipPhoneType: { required: true }
              },
              messages: {
                  addCustomerName: { required: "Name is Required" },
                  addCustomerAdd1: { required: "Address is Required" },
                  addCustomerCity: { required: "City is Required" },
                  addCustomerState: { required: "State is Required" },
                  addCustomerZip: { required: "Zip Code is Required" },
                  addCustomerPhone: { required: "Valid Phone Required", phoneUS: "Valid Phone Required" },
                  addCustomerPhoneType: { required: "Phone Type Required" },
                  addCustomerEmail: { required: "Valid Email Required", email: "Valid Email Required" },
                  addCustomerShipAdd1: { required: "Address is Required" },
                  addCustomerShipCity: { required: "City is Required" },
                  addCustomerShipState: { required: "State is Required" },
                  addCustomerShipZip: { required: "Zip Code is Required" },
                  addCustomerShipPhone: { required: "Valid Phone Required", phoneUS: "Valid Phone Required" },
                  addCustomerShipPhoneType: { required: "Phone Type is Required" }
              },
              success: function(data){
                  if(data == "success"){
  
                  } else {
  
                  }
              }
          })
      }
  </code></pre>
  
  <p>When the form opens the html is as shown above without the jquery label/error class being applied. When entering text in any of the fields except the second address field, the jquery label/error class is applied when onblur occurs. It is an empty label but causes the form fields to drop down for the appended label. </p>
  
  <p>This is what the form looks like when opened</p>
  
  <p><img src="https://i.stack.imgur.com/QPEK8.jpg" alt="Form when opened"></p>
  
  <p>This is the form after data has been entered</p>
  
  <p><img src="https://i.stack.imgur.com/yrf7u.jpg" alt="Form after data entered"></p>
  
  <p>I realize jquery validate does form validation on the blur event, os that part I understand working correctly. The problem is the appended error elements in a valid field and the result causing the form to expand in height and no information being provided to what is happening.</p>
  
  <p>I've tried using debug: true, viewing the console window and trying to trace this error in different ways, unfortunately nothing seems to give me any additional error information to work from.</p>
  
  <p>Help in pointing me in the right direction where the error is in code is greatly appreciated. </p>