J*aScript实现自定义下拉选择框的必填验证

<form>
  <div class="selectFeld" title="Type de contrat">
    <!-- 将 type 改为 hidden，并移除 required 属性 -->
    <input type="hidden" name="typeContrat" id="typecontrat" value="">
    <!-- 提示用户该字段为必填 -->
    <p>Type de contrat (required)</p>
  </div>
  <ul class="container-optionSelec list_contrat myhide">
    <li class="myOptions" data-value="redaction">
      <p>Redaction</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1733">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d1ec912e3543.png" alt="Spirit Me">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1733">Spirit Me</a>
                            <p>SpiritMe允许用户使用数字化身制作视频，这些化身可以模拟用户的声音和情感</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Spirit Me">
                                <span>178</span>
                            </div>
                        </div>
                        <a href="/ai/1733" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Spirit Me">
                        </a>
                    </div>
                
    </li>
    <li class="myOptions" data-value="assistance">
      <p>Assistance</p>
    </li>
  </ul>
  <input type="submit" value="提交">
</form>

2. J*aScript选择逻辑更新

当用户点击一个选项时，valueTypeContra.value会被更新。此时，如果之前有错误提示样式（例如，文本颜色变为红色），应该将其恢复为正常状态。

var options = document.querySelectorAll('.myOptions');
var selecText = document.querySelector('.selectFeld>p');
var mylist = document.querySelector('.list_contrat');
var valueTypeContra = document.querySelector('#typecontrat');

for (option of options) {
  option.onclick = function() {
    mylist.classList.toggle('myhide'); // 隐藏下拉列表
    selecText.style.color = 'black'; // 恢复文本颜色为黑色，清除错误提示
    selecText.innerHTML = this.textContent; // 更新显示文本
    valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入字段的值
  }
}

3. 添加表单提交验证

这是实现必填验证的核心部分。我们将为整个表单添加一个onsubmit事件监听器。在该事件处理器中，我们将检查valueTypeContra的值。

// 获取表单并添加提交事件处理器
document.querySelector('form').onsubmit = function() {
  // 检查 'typeContrat' 的值是否为空字符串
  if ("" === this.elements['typeContrat'].value) {
    // 如果为空，则强调说明文本，将其颜色变为红色
    selecText.style.color = 'red';
    // 向用户提供一个警告消息
    alert('Veuillez sélectionner type de contrat');
    // 阻止表单提交
    return false;
  }
  // 如果 'typeContrat' 的值不为空，则允许表单提交
  else {
    return true;
  }
}

注意事项与最佳实践

• 错误提示的用户体验： 示例中使用alert()作为错误提示，这在实际应用中可能不是最佳的用户体验。更推荐的做法是在自定义下拉框下方或旁边显示一个红色的内联错误消息，而不是中断用户操作。例如，可以创建一个元素来显示错误，并在验证失败时显示它。
• 样式分离： 将错误样式（如selecText.style.color = 'red';）通过CSS类来管理会更好，例如selecText.classList.add('error');，这样可以保持J*aScript的关注点分离。
• 可访问性（Accessibility）： 对于自定义UI组件，确保它们对所有用户（包括使用辅助技术的用户）都是可访问的至关重要。例如，使用WAI-ARIA属性（如aria-haspopup, aria-expanded, aria-labelledby, role="listbox"等）可以显著提高自定义下拉框的可访问性。
• 服务器端验证： 客户端验证可以提供即时反馈，提升用户体验，但绝不能替代服务器端验证。恶意用户可以绕过客户端验证，因此所有重要的验证逻辑都必须在服务器端重新执行。
• 代码组织： 对于更复杂的表单，建议将验证逻辑封装到单独的函数中，或使用更高级的表单验证库。

总结

通过上述J*aScript代码和HTML结构调整，我们成功地为自定义下拉选择框实现了必填验证功能。这种方法不仅解决了原生required属性在隐藏输入字段上无效的问题，还为开发者提供了更大的灵活性，以定制化错误提示和用户体验。在实际项目中，应根据具体需求和用户体验目标，选择最合适的错误提示方式，并始终牢记客户端验证与服务器端验证相结合的重要性。