jquery验证和引导btn。错误放置

Question

我有我的jQuery验证错误消息位置的问题。它看起来像这样：

正被施加到所述按钮上的错误消息。

这是我的无线电集团

<div class="form-group"> 
     <label class="control-label">Gender</label> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-default"> 
      <input type="radio" name="gender" value="male" />Male 
      </label> 
      <label class="btn btn-default"> 
      <input type="radio" name="gender" value="female" />Female 
      </label> 
     </div> 
    </div> 

$(function(){ 
    $("#formTest").validate({ 
     rules : { 
      gender : { 
       required: true 
        } 
       }, 
    }); 
}); 

Answer 1

您可以使用errorPlacement回调控制验证错误信息的位置，insertBefore或insertAfter任何你想要的元素。

例如，在你的情况，你可以以后.control-label类放置验证错误，像这样：

errorPlacement: function (error, element) { 
     error.insertAfter(".control-label"); 
}, 

，你可以使用errorElement选项从label变化元件为div。 （默认： '标签'）

errorElement: 'div', 

最后你的JS代码如下所示：

$(function(){ 
$("#formTest").validate({ 
    rules : { 
     gender : { 
      required: true 
       } 
      }, 

    errorPlacement: function (error, element) { 
     error.insertAfter(".control-label"); 
    }, 

    errorElement: 'div', 
}); 
}); 

见JsFiddle，我希望它为你工作，谢谢！