引导选择验证错误放置

Question

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

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

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

有什么想法吗？

Answer 1

如果您从 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;
}

Answer 2

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

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

根据hidden input elements上的规范

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

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

您可以使用以下 CSS

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

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

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

这是堆栈 sn-ps 中的演示：

$("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>