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>

您必须添加输入的父div的css，然后使用css中的positon absolute并使用top，left或bottom属性来更改要显示的位置，从而更改错误消息的位置。