Javascript 单个元素的Jquery验证插件errorplacement

我正在使用Jquery验证插件验证表单。验证表单的一个元素对齐方式不正确

如果看到图像，则在验证表单时，城市字段的图标+按钮对齐不正确。因为标签错误验证显示在输入元素和图标+之间。我需要在元素下面显示错误消息

对于城市字段，我的html代码是这样的

    <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>

---

错误消息未附加到messageBox div。js中的errorPlacement是否有任何错误。仅对于城市元素，我需要正确显示错误消息。对于其他表单字段，它不应更改。我无法解决此问题。请推荐我。谢谢

缺少else部分，如果它不是

client\u city

元素，则需要在后面插入错误

$(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) {
            console.log('dd', element.attr("name"))
            if (element.attr("name") == "client_city") {
                error.appendTo("#messageBox");
            } else {
                error.insertAfter(element)
            }
        },
        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"
            },

        }

    });
});

---

演示：

我添加了

else

条件。仍然没有结果。如果我使用

errorLabelContainer:“#messageBox”

附加到

messageBox

的所有元素验证消息检查字段之间显示的html消息。但是我不想这样。你把

errorPlacement

放在

rules

对象中，那是错误的

$(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) {
            console.log('dd', element.attr("name"))
            if (element.attr("name") == "client_city") {
                error.appendTo("#messageBox");
            } else {
                error.insertAfter(element)
            }
        },
        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"
            },

        }

    });
});