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-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 设置 bootstrap select 使用 select.bs-select-hidden class 设置样式。

就我而言：

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;
}

Bootstrap-select 验证错误放置

Bootstrap-select validation error placement

html

validation

jquery

twitter-bootstrap

bootstrap-select