jQuery validation message issue

Question

I have three input radio buttons like

<input type="radio" name="specific_parent" id="parent_one" class="radio" value="existing_parent"><label class="redio_label" for="existing_parent">Existing Parent</label>
<input type="radio" name="specific_parent" id="parent_two" class="radio" value="prospective_parent"><label class="redio_label" for="prospective_parent">Prospective Parent</label>
<input type="radio" name="specific_parent" id="parent_third" class="radio" value="other"><label class="redio_label" for="other">Other</label>

I have applied jQuery validation like this:

rules: {
   specific_parent: {
      required: true
   }
},
messages: {
  specific_parent: {
      required: 'Please select radio button'
  }
}

problem is that it display the error message after first input radio button and my layout is break.

Answer 1

Use errorPlacement

 errorPlacement: function (error, element) {
      error.insertBefore(element);
}

Answer 2

<div class="input-container">
<input type="radio" name="specific_parent" id="parent_one" class="radio" value="existing_parent"><label class="redio_label" for="existing_parent">Existing Parent</label>
<input type="radio" name="specific_parent" id="parent_two" class="radio" value="prospective_parent"><label class="redio_label" for="prospective_parent">Prospective Parent</label>
<input type="radio" name="specific_parent" id="parent_third" class="radio" value="other"><label class="redio_label" for="other">Other</label>
</div>
<style type="text/css">
 .input-container{position:relative;} 
</style>

you have to add css of your parent div of inputs then change the position of error message using positon absolute in css and using top,left or bottom properties you can adjust where you want to display.