当使用JavaScript构建自定义选择下拉菜单时，标准的HTML `required`属性对隐藏的关联输入字段无效。本文将指导您如何通过JavaScript在表单提交时实现自定义验证逻辑，检查隐藏输入字段的值，并在未选择选项时提供用户反馈，从而确保数据完整性并提升用户体验。
自定义选择组件的验证挑战
在Web开发中，我们有时会为了实现特定的UI/UX设计而创建自定义的表单元素，例如使用 div、ul 和 li 元素来模拟一个选择下拉菜单。在这种情况下，通常会有一个隐藏的 字段来存储用户的实际选择值，以便在表单提交时将数据发送到服务器。
然而，当尝试对这类自定义组件应用标准的HTML required 属性时，会遇到一个问题：
UI反馈缺失：HTML5的 required 属性通常会触发浏览器内置的验证提示（例如，一个气泡提示“请填写此字段”），并阻止表单提交。但对于 display: none 或 type=”hidden” 的输入字段，这些内置的UI反馈是不可见的，用户无法得知需要进行选择。功能失效：即使将 required 属性添加到隐藏的输入字段上，由于其不可见性，浏览器也无法有效提供用户体验上的“必填”提示，导致其功能性大打折扣。
因此，为了确保用户在自定义选择组件中做出选择，我们必须依赖JavaScript来实现自定义的验证逻辑和用户反馈机制。
立即学习“Java免费学习笔记（深入）”；
实现自定义“必填”验证的步骤
本教程将引导您通过修改HTML结构和添加JavaScript代码，为您的自定义选择下拉菜单实现有效的“必填”验证。
1. 初始HTML结构
首先，我们来看一个典型的自定义选择下拉菜单的HTML结构。它包含一个显示当前选择文本的 p 标签，一个隐藏的 input 字段用于存储值，以及一个 ul 列表作为选项容器。
Type de contrat
@@##@@
Redaction
Assistance
请注意，在这个初始结构中，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结构以支持表单提交
为了能够进行表单提交验证，我们需要将自定义选择组件包裹在一个
以上就是为JavaScript驱动的自定义选择下拉菜单实现“必填”验证的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589444.html
微信扫一扫 
支付宝扫一扫 
