I have found two ways of adding a multiple selection option to drop-down lists. One makes uses of Select2 the other is used on a normal selection drop-down. For my form the drop downs are filled from a look up. I discovered what I feel is a big issue and wanted to see if anyone knows how to fix it.

What is happening when I use either of the ways I mentioned to create a multi-select, it makes it so when the submit button is clicked that even if there are required fields without data the form still submits as if it was valid. I can tell the validation is happening because for a split second I see those with missing data turning red and showing that a value is required, but then the form submits anyway.

Code I used for the Select2 multi select

JavaScript

$(document).ready (function () {
  /*******************************************************************************/
  /*  START: Select2 - allow better searching of a Drop down and force user to   */
  /*  select from available list                                                 */
  /*******************************************************************************/
  
  /*  the function ApplySelect2 can be moved to the global functions*/  
  function ApplySelect2() {
 
    $.getScript('https://<<path to code>>/js/select2.min.js', function () { 
      $('.select2Dropdown select').select2({
        placeholder: "Enter Department",
        width: "370px",
        allowClear: true
      });
      
      $('.select2DropdownMulti select').select2({
        placeholder: "Enter All Department",
        width: "370px",
        allowClear: true,
        multiple: true
      });      
      
    });
  };
  
  
  $('head').append('<link rel="stylesheet" href="https://<<path to code>>/js/select2.min.css" type="text/css" />');

  ApplySelect2();

  
  /* applies the format when a new row is added to a table or a collection */
  /* NOTE: if you have several tables or collections then you may want to  */
  /* change this  so it only gets called for those tables or collections   */
  /* that use the select2. Or even removed the next 3 lines of code if     */
  /* there are no select2 fields in tables or collections.                 */
  $('.cf-table-add-row, .cf-collection-append').on('click', function() {
    ApplySelect2();
  });  


 }); /* END: $(document).ready (function () { */ 

Code I used for the normal multi select

CSS

.dropdownMulti select {
	height: auto;
}

JavaScript

$(document).ready (function () {
  /* Wait until after the lookup is complete */
  $(document).on('onloadlookupfinished', function(event){ 
    
    $('.dropdownMulti select').attr('multiple', true);
    
  }); /* END: $(document).on('lookupcomplete', function(event)*/  
 }); /* END: $(document).ready (function () { */   

So does anyone know how to fix this issue so I can use at least one of these options?