Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel