引导 jQuery 验证插件.. 错误放置问题

Question

所以我已经在我的代码中实现了 jquery 验证插件，如下面的代码所示，但是我在显示所有选项之后的错误代码时遇到了问题。在它被放置在第一个按钮选项内的那一刻。任何人都可以帮助更改我在 JavaScript 中的错误放置代码，以便将错误放置在每个组的所有单选按钮之后。

这是我的包含表单的 php 文件

<form class="form-horizontal" id="Form" action="form.php" method="POST">
    <div class="form-group">
    <label class="col-xs-3 control-label">Gender</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="gender" value="right" /> male
            </label>
            <label class="btn btn-default">
                <input type="radio" name="gender" value="left" /> female
            </label>
        </div>
    </div>
    </div>
    <div class="form-group">
    <label class="col-xs-3 control-label">Height</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="height" value="tall" /> Tall
            </label>
            <label class="btn btn-default">
                <input type="radio" name="height" value="small" /> Small
            </label>
        </div>
    </div>
    </div>
    <div class="form-group">
    <label class="col-xs-3 control-label">Scale</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="scale" value="1" /> 1
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="2" /> 2
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="3" /> 3
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="4" /> 4
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="5" /> 5
            </label>
        </div>
    </div>
    </div>
   <div class="form-group">
    <div class="col-sm-2 col-sm-offset-4">
        <button type="submit" class="btn btn-danger">Submit</button>
    </div>
    </div>
</form>

这里是验证 javascript 代码：

<script type="text/javascript">
$("#Form").validate({
    rules: {
        gender: {
            required: true
        },
        height: {
            required: true
        },
        scale: {
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.form-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form) {
    form.submit();
    }
});

Answer 1

我使用bootstrap v3.3.4、jQuery v2.1.4 和validate v1.13.1 进行了尝试，并且我能够根据您的 HTML 结构获得以下 errorPlacement 语法：

errorPlacement: function(error, element) {
    if (element.is(":radio")) {
        error.insertAfter(element.closest("div"));
    } else {
        error.insertAfter(element);
    }
}

希望这有助于这项事业。

Answer 2

这应该可以工作

 errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }