Showing the error message on top of the select box. This codes solved the probelm and showing the message on buttom of the select box.

Jquery validation problem with select 2 (Solved)

    
# CSS
<style>
    .form-control.valid {
        border-color: #28a745;
    }
    .form-control.error {
        border-color: #dc3545;
    }
    .form-control.error:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
    }
  span.error{
      outline: none !important;
      border: 1px solid #ff5b5b !important;
  }
</style>
    
# Jquery validation
$("form").validate({
    highlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
        } else {
            elem.addClass(errorClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
        } else {
            elem.removeClass(errorClass);
        }
    },
    errorPlacement: function(error, element) {
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            element = $("#select2-" + elem.attr("id") + "-container").parent();
            error.insertAfter(element);
        } else {
            error.insertAfter(element);
        }
    }
});

# Select 2
$(".select2").select2();
$(".select2").on("select2:close", function (e) {
    $(this).valid();
});