bootstrap jQuery validate plugin.. error placement

问题:

So i have implemented the jquery validation plugin to my code as shown in my code below, however i have an issue in displaying the error code to be after all the options. at the minute its being placed inside the first button option. Can anyone help change my error placement code in the JavaScript so that the error is placed after all the radio buttons for each group please.

here is my php file containing the form

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

And here is the validate javascript code:

<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();
    }
});

回答1:

I tried this using bootstrap v3.3.4, jQuery v2.1.4 and validate v1.13.1 and I was able to get the following errorPlacement syntax to work based on how your HTML is structured:

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

Hope this helps the cause.

回答2:

this should work

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