使用Select2库时Bootstrap表单验证在select字段失效原因排查

问题现象 #

在表单的select字段同时使用Bootstrap表单验证和Select2插件后，点击提交时其他字段验证正常，但select字段完全不触发验证；移除Select2的启用类js-example-basic-single后，原生select的Bootstrap验证恢复正常。

问题原因 #

Select2初始化时会将原生的<select>元素设置为display:none隐藏，而Bootstrap的表单验证机制默认会跳过对隐藏元素的校验，导致原生select的required规则不生效。同时Select2生成的自定义DOM结构并不会自动关联Bootstrap的验证状态。

解决方案 #

步骤1：修正HTML中的ID冲突 #

原代码中select的id与第一个input重复，先修正为唯一ID：

<select class="form-control select_acount js-example-basic-single" id="validationTooltip04" required>
  <option value="">--select--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

步骤2：修改JS逻辑，同步验证状态 #

修改初始化代码，添加Select2的状态同步监听，同时在表单提交时手动检查select的有效性：

// Bootstrap表单验证基础逻辑
(() => {
  'use strict'

  const forms = document.querySelectorAll('.needs-validation')

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      // 手动检查所有Select2绑定的select元素
      const select2Elements = form.querySelectorAll('.js-example-basic-single');
      let isValid = true;
      
      select2Elements.forEach(select => {
        if (!select.checkValidity()) {
          isValid = false;
          // 给Select2容器添加Bootstrap无效样式类
          $(select).next('.select2-container').addClass('is-invalid');
        } else {
          $(select).next('.select2-container').removeClass('is-invalid').addClass('is-valid');
        }
      });

      // 结合原生表单验证结果
      if (!form.checkValidity() || !isValid) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()

// Select2初始化并添加状态同步逻辑
$(document).ready(function() {
    $('.js-example-basic-single').select2({
        theme: 'bootstrap4' // 适配Bootstrap4样式
    }).on('change', function() {
        // 触发原生select的校验状态更新
        this.checkValidity();
        // 根据原生状态更新Select2容器样式
        if (this.validity.valid) {
            $(this).next('.select2-container').removeClass('is-invalid').addClass('is-valid');
        } else {
            $(this).next('.select2-container').removeClass('is-valid').addClass('is-invalid');
        }
    });
});

步骤3：添加自定义CSS适配验证样式 #

为Select2下拉框添加Bootstrap风格的验证状态样式：

/* Select2 Bootstrap验证样式适配 */
.was-validated .select2-container.is-valid .select2-selection,
.select2-container.is-valid .select2-selection {
    border-color: #28a745;
}
.was-validated .select2-container.is-invalid .select2-selection,
.select2-container.is-invalid .select2-selection {
    border-color: #dc3545;
}

核心原理 #

1. 强制触发原生隐藏select的checkValidity()方法，确保验证规则被执行
2. 将原生select的验证状态同步到Select2生成的DOM容器上，显示对应的Bootstrap样式
3. 在表单提交时手动遍历检查所有Select2绑定的元素，避免遗漏验证

内容的提问来源于stack exchange，提问作者Andandydongola