I'm trying to use the Jquery validation plugin to validate my form. I have error messages appearing to the right of most of my input elements, but radio buttons are giving me nothing but trouble.

If I don't give a width for the div.group class, the error message appears on the outside of the full page (since I assume the div width is 100% of the page?) Not doing anything causes the error message to appear after the first radio button instead of the 2nd. I can't hardcode a width, since i want to use it on radio groups of several widths. How can I just make it appear at the right edge of wherever the radio buttons in the Radio buttons ends?

Thanks!

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

    }

});

And then

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

Maybe just a way to have the error message appear after the last radio button in the group? If I could get a handle to the last element, I could change the offset accordingly.

EDIT: Aha, I just used div.group{display:inline-block;}.