title: Jquery validation plugin errorplacement for single element
body: <p>i am using Jquery validation plugin for validating the form.when validating the form for one element alignment is not proper.</p>
  
  <p>If you see the image,for the city field <strong>icon +</strong> button alignment not proper when it validating the form. Because label error validation is displaying in between the input element and <strong>icon +</strong>. I need to display the error message below of the element. </p>
  
  <p><img src="https://i.stack.imgur.com/9ESPj.png" alt=""></p>
  
  <p>My html code is like this for the city field</p>
  
  <pre><code>    &lt;tr&gt;
          &lt;td align="right"&gt;&lt;span class="mandetry"&gt;*&lt;/span&gt; City:&lt;/td&gt;
           &lt;td&gt;
         &lt;div class="input-group" id="app_details"&gt;
        &lt;input type="text" class="form-control client_city" name="client_city" id="city_name" value="&lt;?php echo set_value('client_city')?&gt;"&gt; 
       &lt;span class="input-group-btn"&gt;
       &lt;a class="btn btn-default" id='addnewcity' href="&lt;?php echo base_url('addnewcity')?&gt;"&gt;&lt;i class="fa fa-plus-square"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;/span&gt;
     &lt;div id="messageBox"&gt;&lt;/div&gt; &lt;!-- Here i would like to display message--&gt;
      &lt;/div&gt; &lt;/tr&gt;
  </code></pre>
  
  <p>js code is like this</p>
  
  <pre><code>$(document).ready(function(){
  $('#add_client').validate({
      errorClass: 'validation_errors',
      debug: false,
       rules: {
           client_name:{required:true},
           client_address:{required:true},
           client_city:{required:true},
           errorPlacement: function(error, element) {
                  if (element.attr("name") == "client_city" )
                  {
                      error.appendTo("#messageBox");
                  }
              }
       },
       messages: {
           client_name:{required:"The Client name is a required / mandatory field"},
           client_address:{required:"The Client address is a required / mandatory field"},
           client_city:{required:"The City is a required / mandatory field"},
  
       }
  
  });
       });
  </code></pre>
  
  <p>Error message not appended to <strong>messageBox div</strong>.Is there any wrong with <strong>errorPlacement</strong> in js. For only <strong>city</strong> element i need to display the error message properly. For other form fields it shouldn't change.i am unable to solve this issue. Please suggest me. Thanks. </p>