Estou tentando usar o plug-in de validação Jquery para validar meu formulário. Tenho mensagens de erro aparecendo à direita da maioria dos meus elementos de entrada, mas os botões de opção não estão causando problema

Se eu não fornecer uma largura para a classe div.group, a mensagem de erro será exibida na parte externa da página inteira (desde que eu assuma que a largura da div seja 100% da página?) Não fazer nada faz com que a mensagem de erro seja exibida. aparece após o primeiro botão de opção em vez do segundo. Não consigo codificar uma largura, pois quero usá-la em grupos de rádio de várias larguras. Como posso fazer com que apareça na borda direita de onde os botões de opção nos botões de opção terminam?

Obrigado

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);
    }
});

E depoi

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

Talvez seja uma maneira de exibir a mensagem de erro após o último botão de opção no grupo? Se eu pudesse obter uma alça para o último elemento, poderia alterar o deslocamento de acord

EDIT: Ah, acabei de usar o div.group {display: bloco inline;}.