jquery validation messages in one separated div

Question

I have jquery validation plugin over my form. Currently it configured in that way so it adds border color to inputs. If there is validation fail on field, border gets red, if it's correct border gets green. Now because of that setup I have disabled displaying of messages.

But my need is to display all messages in one separated div below input fields. And I don't have an idea how to do that.

you can see current situation here: http://jsfiddle.net/dzorz/akLQR/

so 'name' and 'place' are two of my fields 'messages_container' is my div in which I want to display those two messages defined in script.

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>

script:

//validation
$().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");
    },
                    });
                });

css:

@import   url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');


.invalid {
border: 1px solid red !important;
}

.success{
border: 1px solid green !important;
}

.messages_container{
 border: 1px solid;
 width:300px;
 height:150px;
 margin-left:37px;
}

You can fork or update my jsfiddle freely, anything just to give me some ideas or solutions.

Answer 1

Change

$().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");
  },
});
});

to

$().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");
  },
});
});

Notice the line added in errorPlacement

Demo