Question

I want to display the error message generated by jQuery validation plugin at a specific place. How can i do that? For example I have 2 radio buttons, by default the plugin generates the error message next to first radio button (before the text “1 year”. I want to display after the 2nd radio button (after the text “2 years”. How can i do that?

HTML:

<div >  
    <label for="period">Select period</label>
    <div class = "radio-buttons">
        <input type="radio" name="period" > 1 year
        <input type="radio" name="period" > 2 years 
        <span class="error">Display error message here.</span>  
    </div>                          
</div>

I display error message in a span.

$("#test").validate({
            errorElement: "span",
    });

Answer 1

Try this

$("#test").validate({
        errorElement: "span",
        errorPlacement: function(error, element) {
              error.appendTo(element.siblings("div.error"))
        }
});

And change your error container to a div, to avoid a span inside another span.

<div class = "radio-buttons">
    <input type="radio" name="period" > 1 year
    <input type="radio" name="period" > 2 years 
    <div class="error"></div>  
</div>