使用Select2组件时如何调整浏览器验证消息的位置

我正尝试在现有表单中用Select2组件替换标准的<select>元素，表单逻辑基于原生JS编写，客户端验证由浏览器处理。使用Select2组件时，浏览器生成的验证消息位置错误：点击提交按钮后，Select2的验证消息显示在<label>元素下方，而非<select>元素下方。需要解决这个问题，最好不额外使用jQuery（除了Select2本身依赖的部分）。

现有代码示例 #

JavaScript #

document.querySelectorAll("[data-is=select2]").forEach(el => {
  // Select2仅支持jQuery对象
  let $jqo = $(el);
  $jqo.select2({
    width: "auto",
    placeholder: el.firstElementChild.textContent
  });
  // 确保Select2触发原生change事件，兼容现有处理逻辑
  $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change")));
});

CSS #

form {
  width: 20rem;
}
label {
  display: flex;
  align-items: center;
  column-gap: 1ch;
}
/* 让原生select和Select2容器占满剩余空间 */
select, .select2-container {
  flex-grow: 1;
}

HTML #

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- 原生select示例 -->
<form>
  <p>
    <label>
      问候语:
      <select name="greetings" required>
        <option hidden disabled value="" selected>选择问候语</option>
      </select>
    </label>
  </p>
  <input type="submit" value="原生Select提交">
</form>

<hr>

<!-- 替换为Select2的示例 -->
<form>
  <p>
    <label>
      问候语:
      <select data-is="select2" name="greetings" required>
        <option hidden disabled value="" selected>Select2选择问候语</option>
      </select>
    </label>
  </p>
  <input type="submit" value="Select2提交">
</form>

解决方案 #

方法一：CSS自定义验证消息位置 #

浏览器默认会将验证消息关联到可见的表单元素，而Select2会隐藏原生<select>，导致消息绑定到<label>。可以通过CSS伪元素自定义验证消息，并隐藏浏览器默认提示：

/* 自定义Select2验证消息，插入到label内部末尾 */
label:has([data-is=select2]:invalid)::after {
  content: "请选择一个选项";
  color: #dc3545;
  font-size: 0.875em;
  display: block;
  width: 100%;
  margin-top: 0.25rem;
}

/* 隐藏浏览器默认验证气泡和消息 */
[data-is=select2]:invalid::-webkit-validation-bubble {
  display: none;
}

方法二：原生JS监听验证事件手动定位 #

通过监听表单的invalid事件，阻止默认行为，手动创建验证消息并插入到Select2容器下方：

// 监听含Select2表单的验证失败事件
document.querySelectorAll("form:has([data-is=select2])").forEach(form => {
  form.addEventListener("invalid", (e) => {
    e.preventDefault();
    const selectEl = e.target;
    if (!selectEl.dataset.is) return;

    // 移除已有验证消息
    const select2Container = selectEl.nextElementSibling;
    let existingMsg = select2Container.nextElementSibling;
    if (existingMsg?.classList.contains("custom-valid-msg")) existingMsg.remove();

    // 创建并插入新的验证消息
    const msgEl = document.createElement("div");
    msgEl.className = "custom-valid-msg";
    msgEl.style.cssText = "color:#dc3545; font-size:0.875em; margin-top:0.25rem;";
    msgEl.textContent = selectEl.validationMessage;
    select2Container.parentNode.insertBefore(msgEl, select2Container.nextSibling);
  }, true);
});

// 选择选项后清除验证消息
document.querySelectorAll("[data-is=select2]").forEach(el => {
  el.addEventListener("change", () => {
    const msgEl = el.nextElementSibling.nextElementSibling;
    if (msgEl?.classList.contains("custom-valid-msg")) msgEl.remove();
  });
});

方法三：让原生select保持可见（不可交互） #

通过CSS让原生<select>保持可见但不可点击，使浏览器将验证消息绑定到它，同时让Select2覆盖在上方：

[data-is=select2] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

.select2-container {
  position: relative;
}

调整初始化代码，给父元素添加相对定位：

document.querySelectorAll("[data-is=select2]").forEach(el => {
  let $jqo = $(el);
  $jqo.select2({
    width: "auto",
    placeholder: el.firstElementChild.textContent
  });
  $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change")));
  
  // 确保原生select绝对定位生效
  el.parentNode.style.position = "relative";
});

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