i am using Jquery validation plugin for validating the form.when validating the form for one element alignment is not proper.

If you see the image,for the city field icon + button alignment not proper when it validating the form. Because label error validation is displaying in between the input element and icon +. I need to display the error message below of the element.

My html code is like this for the city field

    <tr>

        <td align=right><span class=mandetry>*</span> City:</td>

         <td>

       <div class=input-group id=app_details>

      <input type=text class=form-control client_city name=client_city id=city_name value=<?php echo set_value('client_city')?>> 

     <span class=input-group-btn>

     <a class=btn btn-default id='addnewcity' href=<?php echo base_url('addnewcity')?>><i class=fa fa-plus-square></i></a>

     </span>

   <div id=messageBox></div> <!-- Here i would like to display message-->

    </div> </tr>

js code is like this

$(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},



     }



});

     });

Error message not appended to messageBox div.Is there any wrong with errorPlacement in js. For only city 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.