Select2 & JqueryValidator 样式问题答案

【问题标题】：Select2 & JqueryValidator style issueSelect2 & JqueryValidator 样式问题
【发布时间】：2015-05-03 14:24:03
【问题描述】：

我正在使用this library 和 jquery.validate 库，但我遇到了样式问题：通常错误应该在选择列表下。
我的 JS 代码：

errorElement: 'p',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.form-group').length) {

                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).closest(".form-group").addClass("has-error").removeClass("has-success");
            $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
        },
        unhighlight: function(element) {
            $(element).closest(".form-group").removeClass("has-error").addClass("has-success");
            $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
        },

HTML 代码：

<div class="form-group has-feedback">
                        <label for="brands" class="col-sm-2">Brand :</label>
                        <div class="col-sm-9">
                            {!! Form::select('brands', $brandsArray, 'default' , ['class' => 'form-control combobox', 'id'=>'brands']) !!}
                        </div>
                        <div class="col-sm-1">
                           <!-- <a href="#" title="Add new brand" data-toggle="modal" data-target="#brandModal"><i class="fa fa-plus"></i></a> -->
                            <button type="button" class="btn btn-xs" title="Add new brand" id="addBrandLogo"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>

出现错误的 HTML 代码：

    <div class="col-sm-9">
<select name="brands" id="brands" class="form-control combobox select2-hidden-accessible" tabindex="-1" aria-hidden="true" aria-required="true" aria-describedby="brands-error" aria-invalid="true"><option selected="selected" value="">...</select>
<p id="brands-error" class="help-block">Please enter brand name</p>
<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 497px;"><span class="selection">...</span></span>
</div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap-3 jquery-select2

【解决方案1】：

这是我解决问题的代码：

    errorPlacement: function(error, element) {
                if(element.parent('.form-group').length) {
                        error.insertAfter(element.parent());
                } else {
                    //check if the element name is the select2 input
                    if (element.attr('name') == "brands")
                        //instead of insetring after the element directly
                        // insert the error after the next tag of element, after the select2 span.
                        error.insertAfter(element.next());
                    else
                        error.insertAfter(element);
                }
            },

【讨论】：