Получите Select2, работающий с проверкой jquery - не добавляя класс в выпадающие или selct2 поля

Question

У меня на сайте есть плагин jqueryvalidation, а также select2.Я пробовал различные методы, которые я нашел в Интернете, чтобы заставить его работать, но по какой-то причине он просто не добавляет класс ошибки в поля выбора.

Вот мой HTML-код для формы

<div class="form-group">
<label for="dob">Date of Birth :</label>

<div class ="row">
<div class = "col-md-6">
<select class ="form-control select2 required"  id ="dobmonth" name ="dobmonth">


    <option disabled value='<?= (isset(explode("/", $user->dob)[1])) ? explode("/", $user->dob)[1] : "MM" ?>' selected disabled >
    <?= (isset(explode("/", $user->dob)[1])) ? explode("/", $user->dob)[1] : "Month" ?>
</option>

<option value ="01">January</option>
<option value ="02">February</option>
<option value ="03">March</option>
<option value ="04">April</option>
<option value ="05">May</option>
<option value ="06">June</option>
<option value ="07">July</option>
<option value ="08">August</option>
<option value ="09">September</option>
<option value ="10">October</option>
<option value ="11">November</option>
<option value ="12">December</option>

</select>
</div>

<style>
ul.myErrorClass, input.myErrorClass, textarea.myErrorClass, select.myErrorClass {
   border-width: 1px !important;
   border-style: solid !important;
   border-color: #cc0000 !important;
   background-color: #f3d8d8 !important;

   background-position: 50% 50% !important;
   background-repeat: repeat !important;
}
ul.myErrorClass input {
   color: #666 !important;
}
label.myErrorClass {
   color: red;
   font-size: 11px;
   /*    font-style: italic;*/
   display: block;
}
</style>

Код проверки Jquery:

$(".validation-wizard").validate({
ignore: [],
  onkeyup: false,
 errorClass: "myErrorClass",

 //put error message behind each form element
 errorPlacement: function (error, element) {
     var elem = $(element);
     error.insertAfter(element);
 },
 highlight: function (element, errorClass, validClass) {
          var elem = $(element);
          if (elem.hasClass("select2-offscreen")) {
              $("#s2id_" + elem.attr("id") + " a").addClass(errorClass);
          } else {
              elem.addClass(errorClass);
          }
      },

      //When removing make the same adjustments as when adding
      unhighlight: function (element, errorClass, validClass) {
          var elem = $(element);
          if (elem.hasClass("select2-offscreen")) {
              $("#s2id_" + elem.attr("id") + " a").removeClass(errorClass);
          } else {
              elem.removeClass(errorClass);
          }
      },



    invalidHandler: function(e, validator){
        var errors = validator.numberOfInvalids();
        if (errors > 0)

        $.toast({
            heading: 'ERROR!',
            text: 'Please ensure all fields are completed.',
            position: 'bottom-right',
            loaderBg: '#c30000',
            icon: 'error',
            hideAfter: 3000,
            allowToastClose: false,
            stack: 1
        });


},
    rules: {
        email: {
            email: !0
        }
    }
});
$(document).on("change", ".select2-offscreen", function () {
       if (!$.isEmptyObject(validobj.submitted)) {
           validobj.form();
       }
   });


   //A select2 visually resembles a textbox and a dropdown.  A textbox when
   //unselected (or searching) and a dropdown when selecting. This code makes
   //the dropdown portion reflect an error if the textbox portion has the
   //error class. If no error then it cleans itself up.
   $(document).on("select2-opening", function (arg) {
       var elem = $(arg.target);
       if ($("#s2id_" + elem.attr("id") + " a").hasClass("myErrorClass")) {
           //jquery checks if the class exists before adding.
           $(".select2-drop ul").addClass("myErrorClass");
           //$(".select2-input").addClass("myErrorClass");
       } else {
           $(".select2-drop ul").removeClass("myErrorClass");
           //$(".select2-input").removeClass("myErrorClass");
       }
   });

когда я проверяю элемент, он добавляет класс ошибки, но, похоже, не показывает фактический выпадающий список, он делает код следующим:

select class="form-control select2 required select2-hidden-accessible myErrorClass" id="dobmonth" name="dobmonth" data-select2-id="dobmonth" tabindex="-1" aria-hidden="true">
<option disabled="" value="02" selected="" data-select2-id="154">
02</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>