Select2自定义下拉选择框的必填校验不生效的原因排查

• 浏览器原生required校验的触发规则，仅会对未被隐藏、参与页面交互的原生表单控件做值校验。Select2初始化后，会自动为原生<select>元素添加select2-hidden-accessible样式类，将原本的select控件移出可视交互区域，仅保留自定义渲染的下拉组件作为用户操作入口。根据HTML约束验证规范，被标记为隐藏、不参与交互的表单元素会被直接跳过校验流程，因此原本写在select上的required规则不会在提交时触发拦截。
• 原生select的空选项配置不规范：现有代码中默认的空选项写为自闭合的<option />&nbsp;，没有主动设置value=""属性。按照HTML的默认解析规则，没有声明value属性的option，其值会自动取标签内的文本内容，也就是转义后的半角空格字符串。该值属于非空的有效内容，哪怕select没有被Select2隐藏，浏览器也会判定当前select已经选中了合法值，不会触发必填拦截。

• 修正空选项配置：将空选项修改为<option value="">--请选择--</option>，明确给空选项赋值空字符串，让浏览器可以正确识别到当前未选择有效选项的状态。
• 适配Select2隐藏机制带来的校验失效问题，可根据场景选择方案：
  1. 调整Select2的内置样式，不要将原生select完全移出文档流、标记为不可交互，保证浏览器可以正常识别该控件并执行原生校验逻辑。
  2. 主动补充表单提交时的自定义校验逻辑：在表单的submit事件监听中，先获取被Select2改造的原生select的当前值，若值为空就主动拦截提交流程，弹出必填提示，不依赖浏览器原生的required校验完成校验。

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