有趣的问题。如果你试着调试，你会发现你的表单提交处理程序根本没有被调用。这是因为，在幕后，你的 tokenfield 实际上是在构建自己的输入：

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

正如您可能看到的，您最初输入的#tokenfield向左移动了10k像素，这样您就看不到它了。因此，当您单击Submit时，HTML5验证确实会发生，但在您不再使用的元素上。（只需尝试删除#tokeninput上所有额外添加的CSS即可）
至于解决方案，如果您确实需要坚持使用tokenfield，请尝试在构建自定义表单提交逻辑时使用它自己的事件和验证。