Интересный вопрос. Если вы попробуете отладку, вы увидите, что обработчик отправки формы не вызывается вообще. Это потому, что за кулисами ваше токенфилд фактически создает свой собственный вход:
<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 сдвинут влево на 10 тысяч пикселей, чтобы вы не могли его увидеть. Поэтому, когда вы нажимаете «Отправить», проверка HTML5 имеет место, но на элементе, который вы больше не используете. (просто попробуйте удалить все добавленные CSS на #tokeninput)
Что касается решения, если вам действительно нужно придерживаться tokenfield, попробуйте использовать его собственные события и проверку при создании своей логики представления пользовательской формы.