Show error on blur when bootstrap tokenfield input field is empty

<label class="form-label required">Request Person</label> <div class="row g-2"> <div class="col"> <input type="text" class="form-control" id="requester_value" name="requester_name" placeholder="Request Person" onblur="validateRequester()" required /> <div class="invalid-feedback" id="RequesterError"></div> </div> <div class="col-auto align-self-center"> <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p>The person who is initiating the transport</p>" data-bs-html="true">?</span> </div> </div>

$('#requester_value').tokenfield({ autocomplete: { source: ['red','blue','green','yellow','violet','brown','purple','black','white'], delay: 100 }, showAutocompleteOnFocus: true })

    $('#requester_value').data('bs.tokenfield').$input.on('blur', function() {

                var requesterid = document.getElementById("requester_value");
                var requesterError = document.getElementById("RequesterError");

                var inputtxt = document.getElementById("requester_value").value;
                if (inputtxt == "") {
                    requesterid.classList.add("invalid");
                    requesterError.innerHTML = "Please fill the field";
                }
            });

I was expecting to show is-invalid class to add to the input and show bordered red line but since the tokenfield input is hidden under the tokenfield class the class I added is not effective. But when i added the class to the auto generated as in below all my tokenfield is properly showing the css bordered error.

I want to achieve this through the id of my input.