jquery验证消息位于一个单独的div中

我的表单上有jquery验证插件。目前，它是以这种方式配置的，因此它向输入添加边框颜色。若字段上的验证失败，边框将变为红色，若正确，边框将变为绿色。现在，由于该设置，我已禁用显示消息

但我需要在输入字段下面的一个单独的div中显示所有消息。我不知道该怎么做

你可以在这里看到当前的情况：

“name”和“place”是我的两个字段，“messages\u container”是我的div，我想在其中显示脚本中定义的这两条消息

html:

 <form class="form-horizontal" id="gold_form" method='post' action='/start_ajax/addgold/'>
 <fieldset>
    <span class="label-f">Name</span>
    <input type="text" class="span4" id="name" name="name">
    </br>
    <span class="label-f">Place</span>
    <input type="text" class="span4" id="place" name="place">
    </br>
    <div class="messages_container">
     </div>
    <button type="submit" id="submit_btn" class="btn btn-primary btn-large">Submit</button>
</fieldset>
</form>

css:

您可以免费提供或更新我的JSFIDLE，任何东西都可以给我一些想法或解决方案。

更改

$().ready(function() {

  $("#gold_form").validate(
  {
    rules:{
     name: "required",
     place: "required"
   },
   messages:{
    name: "Please input your name.",
    place: "Please input your name.",
  },
  errorPlacement: function(error, element) {
    $(element).filter(':not(.valid)').addClass("invalid");
  },
  success: function(error) {
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
  },
});
});

到

注意

errorPlacement

改变

$().ready(function() {

  $("#gold_form").validate(
  {
    rules:{
     name: "required",
     place: "required"
   },
   messages:{
    name: "Please input your name.",
    place: "Please input your name.",
  },
  errorPlacement: function(error, element) {
    $(element).filter(':not(.valid)').addClass("invalid");
  },
  success: function(error) {
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
  },
});
});

到

注意

errorPlacement

---

error.insertAfter（$（'.messages\u container'））

errorPlacement应该定义插入错误的位置，但这不会将消息放在容器内而不是之后，请参见情况

error.appendTo（$（'.messages\u container'））

是的，我已经设法解决了它prependTo和你的appendTo谢谢：）@Jonathan de M.把你的解决方案放在回答中，这样我就可以给你分数

错误。insertAfter（$（'.messages\u container'））

errorPlacement应该定义插入错误的位置，但这不会将消息放在容器内而不是之后，请参阅情况

错误。appendTo（$（'.messages_container'））

是的，我已经设法解决了它，您的appendTo谢谢：）@Jonathan de M。请回答您的问题，以便我可以给您打分

$().ready(function() {

  $("#gold_form").validate(
  {
    rules:{
     name: "required",
     place: "required"
   },
   messages:{
    name: "Please input your name.",
    place: "Please input your name.",
  },
  errorPlacement: function(error, element) {
    $(element).filter(':not(.valid)').addClass("invalid");
  },
  success: function(error) {
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
  },
});
});

$().ready(function() {

  $("#gold_form").validate(
  {
    rules:{
     name: "required",
     place: "required"
   },
   messages:{
    name: "Please input your name.",
    place: "Please input your name.",
  },
  errorPlacement: function(error, element) {
    $(element).filter(':not(.valid)').addClass("invalid");
    error.appendTo($('.message_container'))
  },
  success: function(error) {
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
  },
});
});