Question

I am using the jQuery validation plugin to validate some forms in my pages. It works smoothly except for some radio buttons.

I have the following code:

$("#theForm").validate({
  "rules": {
    "r1" : "required"
  },
  "messages" : {
    "r1" : {
       "required" : "foo"
    }
  }
});
............
............
<input type="radio" name="r1" value="1" /> 
<input type="radio" name="r1" value="2" /> 
<input type="radio" name="r1" value="3" />

Validation works but the “foo” message is shown between the first and second radio button. That won’t do. I want it after the last radio button.

No problem I thought, add my own label after the last radio button:

<input type="radio" name="r1" value="1" /> 
<input type="radio" name="r1" value="2" /> 
<input type="radio" name="r1" value="3" />
<label for="r1" class="error" style="display:none">bar</label>

It works but the “bar” message is shown instead. I don’t want that, I want my messages to all be inside the rules of the validation so how do I do that?

How can I place the error message after the last radio button and make it use the message from the rules (i.e. “foo”)?

Answer 1

You can use the errorPlacement call back when setting up your options.
http://docs.jquery.com/Plugins/Validation/validate#toptions

errorPlacement: function(error, element) {
   if (element.attr('type') === 'radio') {
      error.insertAfter(
          element.siblings('input[type="radio"][name="' + element.attr('name') + '"]:last'));
   }
   else {
      error.insertAfter(element);
   }
}