本教程旨在解决自定义选择器（如使用`div`和`ul`构建的下拉菜单）无法利用浏览器原生`required`属性进行必填验证的问题。我们将探讨如何通过javascript在表单提交时，对隐藏的关联`input`字段进行自定义验证，并在用户未选择时提供明确的错误提示，从而确保数据完整性并提升用户体验。
理解原生required属性的局限性
在构建自定义UI组件时，我们常常会遇到原生HTML特性无法满足需求的情况。例如，当使用div、ul和li等非标准表单元素来模拟下拉选择器时，即使关联了一个隐藏的<input>字段并为其添加了required属性，浏览器也无法触发其内置的必填验证提示。这是因为：
- 隐藏字段： 浏览器通常不会对display: none或type="hidden"的输入字段执行原生验证，因为它们不可见，用户无法直接与之交互。
- 非标准元素： required属性主要设计用于标准的表单元素，如<select>、<input type="text">等，而不是自定义的UI结构。
因此，为了确保用户在提交表单前完成了必要的选择，我们需要借助JavaScript来实现自定义的验证逻辑。
实现自定义必填验证的步骤
本节将详细介绍如何通过JavaScript为自定义选择器实现必填验证。核心思路是在表单提交时，检查关联的隐藏input字段的值，如果为空，则阻止提交并向用户显示错误信息。
1. 优化HTML结构
首先，我们需要一个包含自定义选择器的表单，并将隐藏的input字段的type属性设置为hidden，并移除无效的required属性。同时，为了更好地提示用户，可以在显示文本中加入“必填”字样。
立即学习“前端免费学习笔记（深入）”；
<form id="myForm">
<div class="selectFeld" title="Type de contrat">
<!-- 将 type="text" d-none required 更改为 type="hidden" -->
<input type="hidden" name="typeContrat" id="typecontrat" value="">
<p>Type de contrat (必填)</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>
<button type="submit">提交</button>
</form>关键点：
- 我们将input的type改为hidden，这样它就不会占用页面空间，也不需要额外的CSS来隐藏。
- required属性被移除，因为我们将通过JavaScript处理验证。
- 为input设置name属性，以便在表单提交时能够通过form.elements['name']访问其值。
- 添加了一个<form>标签来包裹整个组件和提交按钮，这是进行表单提交验证的前提。
2. JavaScript核心逻辑
JavaScript部分需要处理两个主要任务：
- 选项选择： 当用户点击自定义选项时，更新隐藏input字段的值，并重置任何可能的错误提示样式。
- 表单提交验证： 监听表单的submit事件，在提交前检查隐藏input字段的值。
// 获取DOM元素
var options = document.querySelectorAll('.myOptions'); // 所有自定义选项
var selecText = document.querySelector('.selectFeld>p'); // 显示当前选择文本的P标签
var mylist = document.querySelector('.list_contrat'); // 选项列表容器
var valueTypeContra = document.querySelector('#typecontrat'); // 隐藏的input字段
// 1. 处理选项选择逻辑
for (let option of options) { // 使用 let 避免闭包问题
option.onclick = function() {
mylist.classList.toggle('myhide'); // 隐藏/显示选项列表
selecText.style.color = 'black'; // 恢复文本颜色，清除错误提示
selecText.innerHTML = this.textContent; // 更新显示文本
valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏input的值
}
}
// 2. 处理表单提交验证
const myForm = document.querySelector('#myForm'); // 获取表单元素
myForm.onsubmit = function(event) {
// 检查隐藏的 'typeContrat' input 字段的值是否为空
if ("" === this.elements['typeContrat'].value) {
// 强调说明文本，提供视觉错误提示
selecText.style.color = 'red';
// 弹出警告框，提供用户错误信息
alert('Veuillez sélectionner type de contrat (请选择合同类型)');
// 阻止表单的默认提交行为
event.preventDefault(); // 现代浏览器推荐使用 event.preventDefault()
return false; // 兼容旧浏览器
}
// 如果值不为空，允许表单提交
return true;
};代码解析：
- 选项选择部分： 当用户点击一个选项时，除了更新显示文本和隐藏input的值外，我们还添加了selecText.style.color = 'black';，这会在用户选择后清除之前可能设置的红色错误提示。
-
表单提交验证部分：
- 我们通过document.querySelector('#myForm')获取到表单元素，并为其添加onsubmit事件监听器。
- 在事件处理函数中，this.elements['typeContrat'].value用于获取名为typeContrat的input字段的值。
- 如果该值为空字符串，表示用户没有进行选择：
- selecText.style.color = 'red'; 将显示文本变为红色，作为视觉上的错误提示。
- alert('Veuillez sélectionner type de contrat'); 弹出一个警告框，告知用户需要选择。在实际应用中，你可能更倾向于使用更友好的、非阻塞式的页面内提示。
- event.preventDefault(); (或return false;) 阻止表单的默认提交行为，即不会将数据发送到服务器。
- 如果input字段有值，则return true;，允许表单正常提交。
进阶考虑与最佳实践
虽然上述方法能够有效地实现自定义必填验证，但在实际项目中，我们还可以从用户体验、可访问性和代码维护性等方面进行优化：
- 更友好的错误提示： alert()会中断用户操作。更好的做法是在自定义选择器下方显示一个红色的提示文本，或者在选择器旁边显示一个小图标，并在鼠标悬停时显示提示。
- 焦点管理： 当验证失败时，将焦点设置到自定义选择器上，方便键盘用户快速定位并修正错误。
- 可访问性（Accessibility）： 对于自定义UI组件，考虑使用ARIA（Accessible Rich Internet Applications）属性来增强屏幕阅读器等辅助技术的兼容性。例如，为自定义选择器添加role="combobox"、aria-haspopup="listbox"、aria-expanded、aria-labelledby等属性。
- 即时验证： 除了在提交时验证，也可以考虑在用户失去焦点（blur事件）或尝试关闭下拉菜单时进行即时验证，提供更早的反馈。
- CSS动画： 为错误提示添加简单的CSS动画，如淡入淡出或轻微抖动，可以使其更具吸引力。
- 模块化： 如果有多个自定义表单组件需要验证，可以将验证逻辑封装成可复用的函数或类。
总结
为自定义选择器实现必填验证，需要我们跳出浏览器原生required属性的限制，转而利用JavaScript在表单提交时进行自定义逻辑判断。通过监听表单的submit事件，检查关联的隐藏input字段的值，并根据其状态提供明确的用户反馈，我们不仅能确保数据的完整性，还能在自定义UI组件中提供与原生表单元素相似的验证体验。在实践中，结合用户体验和可访问性原则，可以构建出更加健壮和友好的表单。
