必填字段不适用于引导令牌字段 [英] Required field not working with bootstrap tokenfield

问题描述

我遇到一个问题，即浏览器无法在空的必填输入字段上打开弹出窗口.

尝试在互联网上搜索，但找不到解决方案.

这是问题的一个工作示例:http://jsfiddle.net/rns3hang/182/

如果我从该示例中删除所有 js，则会打开浏览器默认的请填写此字段"弹出窗口.

有没有办法解决这个问题?

解决方案

有趣的问题.如果您尝试调试，您​​将看到您的表单提交处理程序根本没有被调用.这是因为，在幕后，您的 tokenfield 实际上正在构建自己的输入:

<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 个结果可用，使用向上和向下箭头键导航.</span><input type="text" class="token-input ui-autocomplete-input" autocomplete="off" placeholder="" id="tokenfield-tokenfield"tabindex="0" style="min-width: 60px; width: 640px;">

您可能会看到，您的初始#tokenfield 输入向左移动了 10k 像素，因此您看不到它.因此，当您单击提交"时，HTML5 验证确实会发生，但会发生在您不再使用的元素上.(只需尝试删除 #tokeninput 上所有额外添加的 CSS)

至于解决方案，如果您真的需要坚持使用 tokenfield，请尝试使用它自己的 events 和 validation 构建自定义表单提交逻辑时.

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?

解决方案

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.

这篇关于必填字段不适用于引导令牌字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！