Show error on blur when bootstrap tokenfield input field is empty

Question

<html>
 <head></head>
 <body>
  <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="&lt;p&gt;The person who is initiating the transport&lt;/p&gt;" data-bs-html="true">?</span> 
   </div> 
  </div>
 </body>
</html>

$('#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.

<html>
 <head></head>
 <body>
  <div class="tokenfield form-control is-invalid">
   <input type="text" class="form-control" id="requester_value" name="requester_name" placeholder="Request Person" onblur="validateRequester()" required="" tabindex="-1" style="position: absolute; left: -10000px;" />
   <input type="text" tabindex="-1" style="position: absolute; left: -10000px;" />
   <input type="text" class="token-input ui-autocomplete-input" autocomplete="off" placeholder="Request Person" id="requester_value-tokenfield" tabindex="0" style="min-width: 60px; width: 262px;" />
  </div>
 </body>
</html>

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

Show error on blur when bootstrap tokenfield input field is empty

0 Answers0