Problem with Select2 & JqueryValidator

Question

I am using this library and jquery.validate library and I am having a style problem: usually the error should be in the selection list.

my js code is:

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

 <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 code with error:

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

Answer 1

This is my code to solve the problem:

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