HTML select标签设置required属性未触发校验问题咨询

• 原生select校验规则不匹配：HTML规范中，<select>的required属性生效需满足两个前提：首个<option>的value属性为空值，且无默认选中的非空option。你的代码存在两处不符合规则的问题：一是首个空option未显式声明value=""，部分浏览器会识别为非空值跳过校验；二是非空的Boxes选项默认被设置了selected属性，表单加载时该字段已经有合法值，required自然不会触发校验。
• Select2插件兼容问题：你使用的是基于Select2封装的选择组件，组件初始化后会隐藏原生<select>标签，部分浏览器默认不会对隐藏的表单元素触发原生校验提示，就算原生select结构符合规则也可能出现校验不生效的情况。

1. 先修正原生select的结构，匹配required校验规则：
   给首个空option显式设置value=""，同时将selected属性转移到该空option上，保证表单加载时默认选中空值，修正后的代码如下：

   <select class="js-select2-custom custom-select myClass" name="Description" size="1" id="@(\"txtDescription\"+i)" required
       data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load" }'>
       <option value="" label="empty" selected></option>
       <option value="Boxes">Boxes</option>
       <option value="Envelop">Envelop</option>
       <option value="Pallet">Pallet</option>
   </select>
   

   注意确认模板语法@required渲染后，生成的HTML中select标签上确实存在required属性，没有被模板逻辑过滤。
2. 兼容Select2插件的校验逻辑：
   • 如果使用jQuery.validate等第三方校验库，修改校验配置将隐藏元素纳入校验范围，设置ignore: []即可（默认配置会忽略所有:hidden元素）
   • 如果仅使用原生表单校验，可以在表单提交事件中先手动触发select的校验，或者监听Select2的change事件，值变化后同步到原生select再触发校验。

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