bootstrapValidator bootstrap-select验证不可用的解决办法

下面是"bootstrapValidator bootstrap-select验证不可用的解决办法"的完整攻略：

问题描述

在使用 bootstrapValidator 和 bootstrap-select 插件的过程中，有时会出现 select 标签不能正常验证的问题。

解决方法

1. 禁用 bootstrap-select 插件默认样式

bootstrap-select 插件会改变 select 标签的默认样式，我们可以通过禁用这个默认样式来解决验证不可用的问题。在引入 bootstrap-select 插件的时候，可以添加 'data-style="btn-default"' 来达到目的：

<select class="selectpicker" data-style="btn-default" name="select">
  <option value="">请选择</option>
  <option value="option1">选项一</option>
  <option value="option2">选项二</option>
  <option value="option3">选项三</option>
</select>

1. 修改 bootstrapValidator 的默认配置

bootstrapValidator 插件默认是不会验证 select 标签的，我们需要修改一下插件的默认配置，才能使其对 select 标签进行验证。在引入 bootstrapValidator 插件的时候，可以加上下面两行代码来达到目的：

$.fn.bootstrapValidator.DEFAULT_OPTIONS.excluded = [':disabled', ':hidden', ':not(:visible)'];
$.fn.bootstrapValidator.validators.notEmpty = {
  validate: function(validator, $field, options) {
    // Get the plain text without HTML
    var value = $.trim($field.val());
    if (value === '') {
      return false;
    }
    return true;
  }
};

示例说明

禁用 bootstrap-select 默认样式

<form id="myForm">
  <div class="form-group">
    <label>请选择：</label>
    <!-- 注意要添加 data-style -->
    <select class="selectpicker" data-style="btn-default" name="select">
      <option value="">请选择</option>
      <option value="option1">选项一</option>
      <option value="option2">选项二</option>
      <option value="option3">选项三</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
  $(function() {
    $('#myForm').bootstrapValidator({
      // 配置需要验证的字段
      fields: {
        select: {
          validators: {
            // 验证 select 标签是否选择了选项
            notEmpty: {
              message: '请选择一个选项'
            }
          }
        }
      }
    });
  });
</script>

修改 bootstrapValidator 默认配置

<form id="myForm">
  <div class="form-group">
    <label>请选择：</label>
    <select class="selectpicker" name="select">
      <option value="">请选择</option>
      <option value="option1">选项一</option>
      <option value="option2">选项二</option>
      <option value="option3">选项三</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
  $(function() {
    // 修改默认配置
    $.fn.bootstrapValidator.DEFAULT_OPTIONS.excluded = [':disabled', ':hidden', ':not(:visible)'];
    $.fn.bootstrapValidator.validators.notEmpty = {
      validate: function(validator, $field, options) {
        // Get the plain text without HTML
        var value = $.trim($field.val());
        if (value === '') {
          return false;
        }
        return true;
      }
    };

    $('#myForm').bootstrapValidator({
      // 配置需要验证的字段
      fields: {
        select: {
          validators: {
            // 验证 select 标签是否选择了选项
            notEmpty: {
              message: '请选择一个选项'
            }
          }
        }
      }
    });
  });
</script>

以上就是针对“bootstrapValidator bootstrap-select验证不可用的解决办法”的完整攻略。