JQuery сообщение проверки вопрос

Question

У меня есть три кнопки ввод радио, как

<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> 

Я применил проверку JQuery, как это:

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

проблема заключается в том, что он отображает сообщение об ошибке после нажатия первой входной радио и мой макет разбит.

Answer 1

Использование 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> 

вы должны добавить CSS вашего родительского DIV входов затем изменить положение сообщение об ошибке с помощью positon абсолют в CSS и используя сверху, слева или свойства bottom вы можете настроить там, где хотите отобразить.