Estoy tratando de usar el complemento de validación de Jquery para validar mi formulario. Tengo mensajes de error que aparecen a la derecha de la mayoría de mis elementos de entrada, pero los botones de opción no me dan más que problemas.

Si no doy un ancho para la clase div.group, el mensaje de error aparece en el exterior de la página completa (ya que supongo que el ancho div es el 100% de la página). No hacer nada hace que el mensaje de error aparece después del primer botón de radio en lugar del segundo. No puedo codificar un ancho, ya que quiero usarlo en grupos de radio de varios anchos. ¿Cómo puedo hacer que aparezca en el borde derecho de donde terminan los botones de radio en los botones de radio?

¡Gracias

var validator = $("#myForm").validate({
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
    }
});

Y entonce

<p>
    <div class="group">
        <label>Gender</label>
        Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
        Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female"  />
    </div>

¿Tal vez solo una forma de que aparezca el mensaje de error después del último botón de radio del grupo? Si pudiera manejar el último elemento, podría cambiar el desplazamiento en consecuencia.

EDIT: Ajá, acabo de usar div.group {display: inline-block;}.