Question

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

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

尝试搜索互联网，但无法找到解决方案。

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

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

有解决方法吗？

Answer 1

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

<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像素，以至于您无法看到它。因此，当您单击“提交”时，HTML5验证确实会发生，但在您不再使用的元素上。（只是尝试删除#tokeninput上所有额外添加的CSS）

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

必需字段不使用bootstrap令牌字段

1 个答案: