jquery validate errorPlacement in select2.js [duplicate] - html

Question

This question already has answers here:
select2 and jquery validation not working properly
(3 answers)
How to make select2 work with jquery.validation plugin?
(15 answers)
Error placement, Select2
(2 answers)
Closed 4 years ago.
When error replacement in select2 is showing up above the box, I want the error replacement below the box. Here is my HTML:
<form id="form" class="form_required">
<select type="text" id="test1" class="form-control select2" required>
<option value="">&nbsp();</option>
<option value="1">1</option>
</select>
<button type="button" onclick="insert()">Submit</button>
</form>
Here is the JavaScript:
$('.select2').select2()
$(".form_required").validate({
highlight: function (element, errorClass, validClass) {
$(element).parents('.form-control').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents('.form-control').removeClass('has-error').addClass('has-success');
},
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
}
else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
error.insertAfter(element.parent().parent());
}
else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.appendTo(element.parent().parent());
}
else {
error.insertAfter(element);
}
}
});
function insert(){
if ($('#form').valid()){
alert('OK');
}
}
1) 2)
When not using select2 the error replacement is showing up below box the like number 2 but when using select2 error replacement is showing up above the box..

Answer 1

If you check the source code of the select2 library, you'll see that the select2-container (container responsible for the select2 dropdown) is inserted right after the select element. Here's the part of the code which does that:
Select2.prototype._placeContainer = function ($container) {
$container.insertAfter(this.$element);
var width = this._resolveWidth(this.$element, this.options.get('width'));
if (width != null) {
$container.css('width', width);
}
};
which gets us to easily place the error message from the jquery-validate after this select2-container. Here's the change in the errorPlacement option:
errorPlacement: function (error, element) {
if(element.hasClass('select2') && element.next('.select2-container').length) {
error.insertAfter(element.next('.select2-container'));
}
....
And a snippet showing the results:
$('.select2').select2({container: 'body'})
$(".form_required").validate({
highlight: function (element, errorClass, validClass) {
$(element).parents('.form-control').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents('.form-control').removeClass('has-error').addClass('has-success');
},
errorPlacement: function (error, element) {
if(element.hasClass('select2') && element.next('.select2-container').length) {
error.insertAfter(element.next('.select2-container'));
} else if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
}
else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
error.insertAfter(element.parent().parent());
}
else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.appendTo(element.parent().parent());
}
else {
error.insertAfter(element);
}
}
});
form {
margin: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="form" class="form_required form-horizontal">
<div class="form-group">
<div class="col-sm-8">
<select type="text" id="test1" class="form-control select2" required>
<option value=""> </option>
<option value="1">test1</option>
</select>
</div>
</div>
<div class="form-group">
<button type="button" onclick="insert()">Submit</button>
</div>
</form>
<form id="form2" class="form_required form-horizontal">
<div class="form-group">
<div class="col-sm-8">
<select type="text" id="test2" class="form-control" required>
<option value=""> </option>
<option value="1">test2</option>
</select>
</div>
</div>
<div class="form-group">
<button type="button" onclick="insert2()">Submit</button>
</div>
</form>
<script>
function insert(){
if ($('#form').valid()){
alert('OK');
}
}
function insert2(){
if ($('#form2').valid()){
alert('OK');
}
}
</script>
Hope this helps.