Create a layered panel when validation fails
I would like to create a layer with the validation errors and show it like a tooltip side by side with my form. Something like the following sample:

    +-------------+
    |             |
    |             |    Normal Form
    |             |
    +-------------+
    
    +-------------+-----+
    |             |     |
    |             |-----+    Form with visible 
    |             |          validation errors
    +-------------+

Is it clear? The error container would be only visible if there are validation errors and should be positioned around the top-right area of the form itself.

Actually I have the following sample markup:

    <form id="information" method="post" action="#">
       <fieldset>
          <legend>Please enter your contact details</legend>
              <div id="id">
                  <label for="name">Name: (*)</label>
                  <input type="text" id="name" class="details" name="name" maxlength="50" title="Insert your Name" />
              </div>
              <div id="id">
                  <label for="email">Email: (*)</label>
                  <input type="text" id="email" class="details" name="email" maxlength="50" title="Insert your Email" />
              </div>
       </fieldset>
       <div id="submission">
           <input type="submit" id="submit" value="Send" name="send"/>
       </div>
    </form>

And this jquery code:

    $(document).ready(function () {
        var form = $('#information');
        var container = $('<div class="error"><p>Errors:</p><ol></ol></div>').appendTo(form).hide();
        var validator = form.validate({
            errorContainer: container,
            errorLabelContainer: $("ol", container),
            wrapper: 'li',
            meta: "validate"
        });
    });

which works pretty good to append the error list at below the form. 
How can I show the error div layered on top of the form?

Thanks for helping
Create a layered panel when validation fails
===

I would like to create a layer with the validation errors and show it like a tooltip side by side with my form. Something like the following sample:

    +-------------+
    |             |
    |             |    Normal Form
    |             |
    +-------------+
    
    +-------------+-----+
    |             |     |
    |             |-----+    Form with visible 
    |             |          validation errors
    +-------------+

Is it clear? The error container would be only visible if there are validation errors and should be positioned around the top-right area of the form itself.

Actually I have the following sample markup:

    <form id="information" method="post" action="#">
       <fieldset>
          <legend>Please enter your contact details</legend>
              <div id="id">
                  <label for="name">Name: (*)</label>
                  <input type="text" id="name" class="details" name="name" maxlength="50" title="Insert your Name" />
              </div>
              <div id="id">
                  <label for="email">Email: (*)</label>
                  <input type="text" id="email" class="details" name="email" maxlength="50" title="Insert your Email" />
              </div>
       </fieldset>
       <div id="submission">
           <input type="submit" id="submit" value="Send" name="send"/>
       </div>
    </form>

And this jquery code:

    $(document).ready(function () {
        var form = $('#information');
        var container = $('<div class="error"><p>Errors:</p><ol></ol></div>').appendTo(form).hide();
        var validator = form.validate({
            errorContainer: container,
            errorLabelContainer: $("ol", container),
            wrapper: 'li',
            meta: "validate"
        });
    });

which works pretty good to append the error list at below the form. 
How can I show the error div layered on top of the form?

Thanks for helping