Change border color of Selectize control for validation

Question

I have a form which is using selectize for select drop downs. In my validation code, I add the ID of any empty input to an array, and then add the requiredField class to each of those elements.

I am able to successfully get the IDs of selectize inputs that have not been changed put into the array, so that part is working. When I look at the rendered code, my requiredField class is added to the selectize element, so that is working also. But the border color is not changing even with the added class.

The code works for all of my text inputs, but I can't figure out why it's not working for the selectize drop downs. I looked at the rendered code, and it looks like selectize is creating an element with a different ID, so I tried using that ID (adding -selectize to the end) but alas that's not working either. Here is my code:

The CSS

    .requiredField{
        border: thin solid red !important;
    }

The Javascript

            var empty_fields=[];
            $(".code_description").each(function(){
                if ($(this).attr("value")==="") {
                    empty_fields.push($(this).attr("id"));
                }
            });
            $(".code_select").each(function(){
                if ($(this).find('option:selected').length === 0) {
                    empty_fields.push($(this).attr("id"));
                    empty_fields.push($(this).attr("id")+'-selectized');
                }                
            });
            //console.log(empty_fields);
            var fld_text="<p>Review required fields</p>";
            $('#error-messages').html(fld_text);
            empty_fields.forEach(element => $("#"+element).addClass("requiredField"));

Selectize Initialization:

           // initialize newCodes selectize control      
            newCodesSelect[index] = $(this).selectize({         
               valueField: 'id',
               labelField: 'label',
               create: false,
               hideSelected: false,
               options: listOptions[listType],          
               searchField: 'label',
               placeholder: "Choose " + listType + " codes (type to search)",
               maxItems: 1,
               onChange: function(value) {
                    // not needed?
               }
               //TODO 'add new'
            });
            //This stores the selectize object to a variable
            newCodesSelectize[index] = newCodesSelect[index][0].selectize;      

This is what the rendered HTML looks like for one of the selectize options.

<div class="col-4"> 
    <input type="text" class="form-control code_select selectized requiredField" id="5-tree-Betpap-stdCodeSelect" name="5-tree-Betpap-stdCode" aria-label="Tree Metric Field 5  Standard Code select" tabindex="-1" value="" style="display: none;">
    <div class="selectize-control form-control code_select single">
        <div class="selectize-input items not-full has-options">
           <input type="text" autocomplete="off" tabindex="" id="5-tree-Betpap-stdCodeSelect-selectized" placeholder="Choose species codes (type to search)" style="width: 271.812px;" class="requiredField">
        </div>
        <div class="selectize-dropdown single form-control code_select" style="display: none;">
            <div class="selectize-dropdown-content"></div>
        </div>
    </div>
</div>

Here is a screenshot showing the text field, with the red border, and the selectize field without:

Any ideas are appreciated, thank you!