jQuery validation custom error message display for radio button

Question

I'm using jQuery validation and trying to get the error message for a pair of radio buttons to show up before the first button.

Here is the validation:

errorPlacement: function(error, element) {
if (element.attr("type") == "radio")
   error.insertBefore(element.first());
 else
   error.insertAfter(element);
}

Here is the html:

<div class="full">
<label id="sample">Have you received your sample pack?</label>

<input type="radio" name="sample" id="sample_yes" value="yes" />
<label for="eliteflexsample_yes">Yes</label>

<input type="radio" name="sample" id="sample_no" value="no" />
<label for="eliteflexsample_no">No</label>    
</div>

Right now the error is showing up after the first radio button.

Answer 1

This is working:

$(document).ready(function() {

    $('form').validate({

        // your validation options,

        errorPlacement: function(error, element) {
            if (element.attr("type") == "radio") {
                error.insertBefore(element);
            } else {
                error.insertAfter(element);
            }
        }

    });

});​

Working Demo:

http://jsfiddle.net/DR5Aw/2/