Required field not working with bootstrap tokenfield

Question

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

<input type="text" class="form-control" id="tokenfield" value="" required/>

Tried search the internet, but couldnt find a solution.

Here is a working example of the problem: http://jsfiddle.net/rns3hang/182/

If I remove all the js from that example then the browsers default "Please fill out this field" popup opens.

Is there a solution to this?

Answer 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.