jquery - Bootstrap-select验证错误放置

Question

我正在使用 bootstrap-select插件和 HTML5 验证以验证 <select> .

在未选择选项的情况下提交表单时，我可以查看错误消息。但是，错误消息显示在表单外，而不是在 <select> 旁边.

此验证对于不使用该插件的其他输入字段工作得很好，但对于任何 <select> 都有问题使用该插件。

有什么想法吗？

Answer 1

问题是 bootstrap-select 将隐藏您的原始输入，而是使用 divs 设置它自己的样式这是它的样子:

因此，当您提交时，当 HTML5 验证尝试关注您的隐藏控件时，您应该会看到以下错误:

根据 hidden input elements 上的规范

When an input element's type attribute is in the Hidden state [...] The input element represents a value that is not intended to be examined or manipulated by the user.

作为解决方法，您可以重新打开可见性，但折叠控件。这可能会导致其他问题，并且实际上不会聚焦正确的控件，但会导致验证消息出现在正确的位置。

你可以使用下面的 CSS

select.selectpicker {
  display: block !important;
  float: left;
  overflow: hidden; 
  height: 34px;
  width: 0;
  border: 0; 
  padding: 0; 
  box-shadow: none; 
  color: white; 
}

此外，您还需要一种方法将焦点事件从现在可用的原始控件转移到 Bootstrap 选择。这将捕获您自己在论坛上的选项卡事件，并在 HTML5 验证启动时帮助重定向焦点。

$("select.selectpicker").focus(function(){
  $(this).next(".bootstrap-select").find('.selectpicker').focus();
});

这是堆栈片段中的演示:

$("select.selectpicker").focus(function(){
  $(this).next(".bootstrap-select").find('.selectpicker').focus();
});

select.selectpicker {
  display: block !important;
  float: left;
  overflow: hidden; 
  
  height: 34px;
  width: 0;
  border: 0; 
  padding: 0; 
  
  box-shadow: none; 
  color: white; 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>


<form >
  <input type="text" name="name" required /><br/>
  
  <select name="select-plain" required>
    <option></option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select><br/>
  
  <select name="select-boot" class="selectpicker" required>
    <option></option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select><br/>
  
  <input type="submit" value="Submit"/>
</form>