jquery - 引导选择验证错误放置

Question

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

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

此验证对于不使用插件的其他输入字段非常有效，但对于<select>使用插件的任何输入字段都有问题。

有任何想法吗？

Answer 1

问题是 bootstrap-select 将隐藏您的原始输入，而是使用 div 设置它自己的样式如下所示：

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

根据隐藏输入元素的规范

当输入元素的类型属性处于隐藏状态时 [...] 输入元素表示不打算由用户检查或操作的值。

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

您可以使用以下 CSS

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

此外，您需要一种将焦点事件从现在可用的原始控件转移到 bootstrap-select 的方法。这将在论坛上捕获您自己的选项卡事件，并在 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>

Answer 2

如果您要从 jquery 设置引导选择，请使用select.bs-select-hidden类来设置样式。

就我而言：

HTML：

<div class="form-group">
   <select class="form-control select-tag" name="category" required>
       <option disabled selected >activities</option>
       <option value="swimming">Swimming</option>
       <option value="painting">Painting</option>
       <option value="music">Music</option>
       <option value="dance">Dance</option>
       <option value="computers">Computers</option>
   </select>
</div>

还有我的 CSS：

select.bs-select-hidden {
  border: 0 none;
  bottom: 0;
  box-shadow: none;
  color: white;
  display: inline-block !important;
  height: 0 !important;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0;
}