jquery验证和bootstrap 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，我希望它适合您，谢谢！