当使用javaScript构建自定义选择下拉菜单时，标准的html `required`属性对隐藏的关联输入字段无效。本文将指导您如何通过javascript在表单提交时实现自定义验证逻辑，检查隐藏输入字段的值，并在未选择选项时提供用户反馈，从而确保数据完整性并提升用户体验。
自定义选择组件的验证挑战
在Web开发中，我们有时会为了实现特定的UI/ux设计而创建自定义的表单元素，例如使用 div、ul 和 li 元素来模拟一个选择下拉菜单。在这种情况下，通常会有一个隐藏的 <input> 字段来存储用户的实际选择值，以便在表单提交时将数据发送到服务器。
然而，当尝试对这类自定义组件应用标准的HTML required 属性时，会遇到一个问题：
- UI反馈缺失：html5的 required 属性通常会触发浏览器内置的验证提示（例如，一个气泡提示“请填写此字段”），并阻止表单提交。但对于 display: none 或 type=”hidden” 的输入字段，这些内置的UI反馈是不可见的，用户无法得知需要进行选择。
- 功能失效：即使将 required 属性添加到隐藏的输入字段上，由于其不可见性，浏览器也无法有效提供用户体验上的“必填”提示，导致其功能性大打折扣。
因此，为了确保用户在自定义选择组件中做出选择，我们必须依赖JavaScript来实现自定义的验证逻辑和用户反馈机制。
立即学习“Java免费学习笔记（深入）”；
实现自定义“必填”验证的步骤
本教程将引导您通过修改HTML结构和添加JavaScript代码，为您的自定义选择下拉菜单实现有效的“必填”验证。
1. 初始HTML结构
首先，我们来看一个典型的自定义选择下拉菜单的HTML结构。它包含一个显示当前选择文本的 p 标签，一个隐藏的 input 字段用于存储值，以及一个 ul 列表作为选项容器。
<div class="selectFeld" title="Type de contrat"> <!-- 移除 'required' 属性，并建议使用 type="hidden" --> <input type="text" name="typeContrat" id="typecontrat" class="d-none"> <p>Type de contrat</p> <img src="icon_form/Icon_contrat_deroulant.png" alt="" class="icon_select"> </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 字段的 required 属性已被移除，因为它是无效的。我们建议将其 type 属性更改为 hidden 以明确其用途。
2. 基础JavaScript选项处理
以下是处理选项选择和更新隐藏输入字段值的基本JavaScript代码：
var options = document.querySelectorAll('.myOptions'); var selecText = document.querySelector('.selectFeld>p'); var mylist = document.querySelector('.list_contrat'); var valueTypeContra = document.querySelector('#typecontrat'); for(let option of options) { // 使用 let 避免变量泄漏 option.onclick = function() { mylist.classlist.toggle('myhide'); // 切换列表显示/隐藏 selecText.innerHTML = this.textContent; // 更新显示文本 valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入字段的值 } }
这段代码确保当用户点击一个选项时，自定义下拉菜单会关闭，显示文本会更新，并且关联的隐藏 input 字段会获得正确的值。
3. 完善HTML结构以支持表单提交
为了能够进行表单提交验证，我们需要将自定义选择组件包裹在一个 <form> 标签内，并添加一个提交按钮。同时，将隐藏的 input 字段的 type 明确设置为 hidden，并为其设置一个初始的空 value。
<form> <div class="selectFeld" title="Type de contrat"> <!-- 更改为 type="hidden" 并设置初始 value 为空 --> <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> </li> <li class="myOptions" data-value="assistance"> <p>Assistance</p> </li> </ul> <input type="submit" value="Submit Form"> <!-- 添加提交按钮 --> </form>
4. 实现自定义JavaScript验证逻辑
现在，我们将添加核心的JavaScript验证逻辑。这包括：
- 在选项被选择时，清除任何之前显示的错误状态。
- 在表单提交时，检查隐藏 input 字段的值。
- 如果值为空，阻止表单提交，并向用户提供视觉反馈（例如，改变提示文本颜色）和提示信息。
var options = document.querySelectorAll('.myOptions'); var selecText = document.querySelector('.selectFeld>p'); var mylist = document.querySelector('.list_contrat'); var valueTypeContra = document.querySelector('#typecontrat'); // 1. 更新选项点击处理程序，以清除错误样式 for (let option of options) { option.onclick = function() { mylist.classList.toggle('myhide'); // 切换列表显示/隐藏 selecText.style.color = 'black'; // 恢复提示文本为黑色，清除错误提示 selecText.innerHTML = this.textContent; // 更新显示文本 valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入字段的值 } } // 2. 为表单添加提交事件处理程序 document.querySelector('form').onsubmit = function () { // 检查隐藏输入字段 'typeContrat' 的值是否为空字符串 if ( "" === this.elements['typeContrat'].value ) { // 如果为空，强调提示文本，例如将其颜色改为红色 selecText.style.color = 'red'; // 向用户提供一个警告消息 alert('Veuillez sélectionner type de contrat'); // 请选择合同类型 // 阻止表单的默认提交行为 return false; } // 如果已做出选择（值不为空），则允许表单提交 else { return true; } }
在这段代码中：
- 我们修改了 option.onclick 事件处理程序，使其在用户选择一个选项后，将 selecText 的颜色恢复为黑色，从而清除之前可能显示的错误提示。
- document.querySelector(‘form’).onsubmit 监听表单的提交事件。
- this.elements[‘typeContrat’].value 用于获取隐藏 input 字段的值。
- 如果值为空，selecText.style.color = ‘red’ 会将提示文本变为红色，alert() 会弹出一个警告框，return false; 则会阻止表单提交。
- 如果值不为空，return true; 允许表单正常提交。
注意事项与最佳实践
-
用户体验优化：
- 避免 alert()：虽然 alert() 简单易用，但在现代Web应用中，它通常被认为是对用户体验的干扰。更好的做法是在表单字段旁边显示内联错误消息，或使用更友好的弹出提示（如Toast通知）。
- 清晰的视觉反馈：除了改变文本颜色，还可以考虑改变自定义选择组件的边框颜色、添加错误图标或使用动画来吸引用户注意。
- 焦点管理：当验证失败时，尝试将焦点设置到相关字段，方便用户快速修正。
-
可访问性（accessibility）：
- 对于自定义组件，确保它们对屏幕阅读器用户是可访问的。使用WAI-ARIA属性（如 role=”combobox”、aria-haspopup、aria-expanded、aria-labelledby、aria-required、aria-invalid 等）来增强语义。
- 确保键盘导航（Tab键、方向键）能够正常操作自定义选择组件。
-
错误消息的国际化：
- 如果您的应用支持多种语言，确保错误消息也能进行国际化处理。
-
表单验证的全面性：
- 除了“必填”验证，您的表单可能还需要其他类型的验证（如格式验证、长度验证等）。考虑使用一个统一的验证函数或库来管理所有表单字段的验证逻辑。
-
服务端验证：
- 客户端（JavaScript）验证是为了提供即时用户反馈，提升用户体验。但它不能替代服务端验证。始终在服务器端重新验证所有提交的数据，以防止恶意用户绕过客户端验证。
总结
为JavaScript驱动的自定义选择下拉菜单实现“必填”验证，需要我们跳出标准HTML required 属性的限制，转而利用JavaScript进行自定义的表单提交验证。通过监听表单的 submit 事件，检查关联的隐藏输入字段的值，并提供明确的用户反馈，我们可以有效地确保用户完成必要的选择，同时提升应用的可用性和数据完整性。记住，良好的用户体验和可访问性是构建高质量Web应用的关键组成部分。