为JavaScript驱动的自定义选择下拉菜单实现“必填”验证，需通过JavaScript动态检查隐藏输入字段的值，并在表单提交时提供用户反馈。以下是具体实现步骤和代码示例：
1. 完善HTML结构将自定义选择组件包裹在<form>标签内，并设置隐藏的<input>字段用于存储值。
<form id="myForm"> <div class="selectFeld" title="Type de contrat"> <!-- 隐藏输入字段，初始值为空 --> <input type="hidden" name="typeContrat" id="typecontrat" value=""> <!-- 显示当前选择文本的占位符 --> <p class="select-text">Type de contrat (required)</p> </div> <ul class="container-optionSelec list_contrat myhide"> <li class="myOptions" data-value="redaction"><p>Redaction</p></li> <li class="myOptions" data-value="assistance"><p>Assistance</p></li> </ul> <input type="submit" value="Submit Form"></form>2. 基础JavaScript选项处理实现选项点击事件，更新隐藏输入字段的值和显示文本。
var options = document.querySelectorAll('.myOptions');var selecText = document.querySelector('.select-text');var mylist = document.querySelector('.list_contrat');var valueTypeContra = document.querySelector('#typecontrat');for (let option of options) { option.onclick = function() { mylist.classList.toggle('myhide'); // 切换选项列表显示/隐藏 selecText.innerHTML = this.textContent; // 更新显示文本 valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入值 selecText.style.color = 'black'; // 清除错误样式 };}3. 实现表单提交验证逻辑监听表单提交事件，检查隐藏输入字段的值是否为空，并提供反馈。
document.getElementById('myForm').onsubmit = function(event) { // 检查隐藏输入字段的值是否为空 if (valueTypeContra.value === "") { // 提供视觉反馈：改变文本颜色为红色 selecText.style.color = 'red'; // 可选：显示内联错误消息（替代alert） const errorMsg = document.createElement('span'); errorMsg.className = 'error-message'; errorMsg.textContent = 'Veuillez sélectionner un type de contrat'; selecText.appendChild(errorMsg); // 阻止表单提交 event.preventDefault(); } else { // 验证通过，允许提交 return true; }};4. 优化用户体验和可访问性- 避免使用alert()：改用内联错误消息或Toast通知。
- 增强视觉反馈：除了改变文本颜色，可添加错误图标或改变边框颜色。
- 焦点管理：验证失败时，将焦点设置到相关字段。
// 示例：添加错误图标和边框selecText.style.border = '1px solid red';const errorIcon = document.createElement('span');errorIcon.className = 'error-icon';errorIcon.innerHTML = '⚠️';selecText.appendChild(errorIcon);<div class="selectFeld" title="Type de contrat" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="select-label" aria-required="true"> <p id="select-label" class="select-text">Type de contrat (required)</p></div>5. 完整代码示例<form id="myForm"> <div class="selectFeld" title="Type de contrat" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="select-label" aria-required="true"> <input type="hidden" name="typeContrat" id="typecontrat" value=""> <p id="select-label" class="select-text">Type de contrat (required)</p> </div> <ul class="container-optionSelec list_contrat myhide"> <li class="myOptions" data-value="redaction"><p>Redaction</p></li> <li class="myOptions" data-value="assistance"><p>Assistance</p></li> </ul> <input type="submit" value="Submit Form"></form><script> var options = document.querySelectorAll('.myOptions'); var selecText = document.querySelector('.select-text'); var mylist = document.querySelector('.list_contrat'); var valueTypeContra = document.querySelector('#typecontrat'); for (let option of options) { option.onclick = function() { mylist.classList.toggle('myhide'); selecText.innerHTML = this.textContent; valueTypeContra.value = this.getAttribute('data-value'); selecText.style.color = 'black'; // 清除之前的错误消息和图标 const existingError = selecText.querySelector('.error-message'); if (existingError) selecText.removeChild(existingError); const existingIcon = selecText.querySelector('.error-icon'); if (existingIcon) selecText.removeChild(existingIcon); selecText.style.border = ''; }; } document.getElementById('myForm').onsubmit = function(event) { if (valueTypeContra.value === "") { selecText.style.color = 'red'; selecText.style.border = '1px solid red'; const errorMsg = document.createElement('span'); errorMsg.className = 'error-message'; errorMsg.textContent = 'Veuillez sélectionner un type de contrat'; const errorIcon = document.createElement('span'); errorIcon.className = 'error-icon'; errorIcon.innerHTML = '⚠️'; selecText.appendChild(errorIcon); selecText.appendChild(errorMsg); event.preventDefault(); } };</script>注意事项- 服务端验证：客户端验证不能替代服务端验证，需在服务器端重新验证数据。
- 国际化：如果应用支持多语言，确保错误消息能进行国际化处理。
- 全面验证：考虑添加其他验证逻辑（如格式、长度等），可使用统一验证函数或库管理。
通过以上步骤，可为JavaScript驱动的自定义选择下拉菜单实现有效的“必填”验证，确保数据完整性并提升用户体验。
