Crear un panel en capas cuando falla la validación

Me gustaría crear una capa con los errores de validación y mostrarla como una información sobre herramientas al lado de mi formulario. Algo como el siguiente ejemplo:

+-------------+
|             |
|             |    Normal Form
|             |
+-------------+

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

¿Está limpio? El contenedor de errores solo sería visible si hay errores de validación y debe colocarse alrededor del área superior derecha del formulario.

En realidad, tengo el siguiente marcado de muestra:

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

Y este código de jquery:

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

que funciona bastante bien para agregar la lista de errores debajo del formulario. ¿Cómo puedo mostrar el error div en capas en la parte superior del formulario?

Gracias por ayudar

preguntado el 12 de junio de 12 a las 17:06

Agregue un recipiente para contener el <fieldset> and <div id="submission"> y aumente el ancho del formulario, o cree un contenedor alrededor del formulario que sea del ancho del formulario + el contenedor de error y agregue el div de error a eso. -

Gracias por su respuesta. Tus soluciones son claras para mí, pero tal vez yo no estaba tan claro. Me refiero a un panel en capas, independiente del formulario, pero simplemente "atado", en su posición, a la posición superior derecha del formulario mismo. Ya tengo un contenedor, que a veces es un diálogo de jquery. -

Si entendí bien... ¿Qué pasa si te peinas? .error con position:absolute; top:0; right:0;? -

He intentado agregar estilo en línea con .css({ position: absolute, top: 0, right: 0}) y el resultado es que el error ya no se muestra y la validación no funciona, ya que no impide el envío. -

1 Respuestas

Al configurar explícitamente el contenedor de mensajes de error con una ID y también configurar el contenedor de etiquetas, es mucho más fácil diseñar el cuadro de mensaje de error según sea necesario.

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

jQuery:

$(function() {
    var form = $('#information');
    var validator = form.validate({
        errorContainer: "#messageBox",
        errorLabelContainer: "#messageBox ol",
        wrapper: 'li',
        meta: "validate"
    });
});

CSS:

#formColumn{
    display:inline;
    float:left
}
#messageBox{
    display:none;
    float:left
}​

Además, tenga cuidado con la clase "error" como mensaje de error contenido, ya que el complemento del validador usa este nombre en otros lugares.

http://jsfiddle.net/yvxRc/

Respondido el 12 de junio de 12 a las 19:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.