jquery Validation - trying to Validate Radio and checkbox bottons and use ErrorPlacemant to display Error Below each group

Newbie here I am trying to get Radio buttons and checkbox buttons to validate.

Error message should appear under the last it's groups of radio/checkbox

The radio buttons requires a selection The check buttons Required one selected minimum

--- On the Media, since all have a unique ID I treated it as a group, but am lost on addMethod to validate group.

--- Also on errorPlacement what do I do if I don't have an Element ID?

http://jsbin.com/aqekah/1开发者_如何学Python4

Mostly OK, but now I get wrong number of InValids in my alert

---

We had this come up just the other day actually, this is how I resolved it:

var validator = $('form#yourID').validate({
        errorPlacement: function (error, element) {
            if (element.is(":radio")) {
                element.closest('.rbl').after(error);
                element.closest('.rbl').addClass('error');
            }
            else if (element.is(":checkbox")) {
                element.closest('.cbl').after(error);
                element.closest('.cbl').addClass('error');
            }
            else { // This is the default behavior of the script
                error.insertAfter(element);
            }
        },
        rules: { ...

Where .rbl is a <table> tag and looks like this with the following css:

<table cellpadding="0" cellspacing="0" class="rbl">
<tr><td><label><input type="radio" name="myradio" value="1"> Radio 1</label></td></tr>
<tr><td><label><input type="radio" name="myradio" value="2"> Radio 2</label></td></tr>
</table>

css:

FORM .rbl
{
    float: left;
}
FORM .rbl TD
{
    padding: 4px 24px 0 0;
}

The same can be applied for checkbox lists with a .cbl. All other non-radio and checkbox types will use standard error placement.

Hope that helps.