Required Field Not Working With Bootstrap Tokenfield

I have a problem where browser does not open the popup on an empty required input field. Tried se

Solution 1:

Interesting question. If you try debugging you will see that your form submit handler is not called at all. This is because, behind the scenes, your tokenfield is actually building its own input:

<div class="tokenfield form-control">
  <input type="text" class="form-control"id="tokenfield" value="" required="" tabindex="-1" style="position: absolute;left: -10000px;">
  <input type="text" tabindex="-1" style="position: absolute; left: -10000px;"><span role="status" aria-live="polite" class="ui-helper-hidden-accessible">9 results are available, use up and down arrow keys to navigate.</span>
  <input type="text" class="token-input ui-autocomplete-input" autocomplete="off" placeholder=""id="tokenfield-tokenfield"
  tabindex="0" style="min-width: 60px; width: 640px;">
</div>

As you may probably see, your initial #tokenfield input is shifted to the left by 10k pixels such that you cannot see it. So when you click on Submit, the HTML5 validation does take place but on an element you are no longer using. (just try removing all extra-added CSS on #tokeninput) As for the solution, if you really need to stick with tokenfield, try using its own events and validation when building your custom form submit logic.