表单双选项按钮未点击时 如何阻止倒计时结束后表单提交

原有代码失效原因 #

• HTML标准规定页面中id属性必须唯一，两个按钮共用id时，document.getElementById("option")只会匹配到页面中第一个出现的按钮，设置的属性根本不会作用到第二个按钮上。
• 原生required表单校验属性仅对<input>、<select>、<textarea>这类可输入/选择的表单控件生效，普通<button>元素本身不支持required校验规则，就算给单个按钮加了这个属性也不会触发拦截。

具体实现步骤 #

1. 先修正基础代码缺陷
   移除两个按钮重复的id，保留相同name属性即可，给两个按钮加上统一的类名方便统一选中操作，参考代码：

   <button name="option" value="A" class="btn btn-outline-primary option-btn" onclick="storeTime()" > Select Option A</button>
   <button name="option" value="B" class="btn btn-outline-primary option-btn" onclick="storeTimeB()" > Select Option B</button>
   

   在表单内部新增一个隐藏输入域，用来存储用户的选中状态，同时利用这个输入域的required属性做原生校验：

   <input type="hidden" name="selected_option" id="selected_option" value="" required>
   

2. 调整按钮点击逻辑
   在两个按钮对应的点击方法里，给隐藏输入域同步赋值，标记用户已经完成选择：

   function storeTime() {
     // 保留你原本的计时存储逻辑
     document.getElementById("selected_option").value = "A";
   }
   function storeTimeB() {
     // 保留你原本的计时存储逻辑
     document.getElementById("selected_option").value = "B";
   }
   

3. 增加超时拦截逻辑
   定义全局超时标记，在倒计时结束回调里修改标记、禁用选项按钮，同时给表单绑定提交监听做双重校验，避免校验被绕过：

   let isCountdownEnd = false;
   
   // 你原来的倒计时结束触发函数里添加以下逻辑
   function countdownFinishCallback() {
     isCountdownEnd = true;
     // 禁用所有选项按钮，禁止超时后选择
     document.querySelectorAll(".option-btn").forEach(btn => {
       btn.disabled = true;
     });
   }
   
   // 给表单绑定提交校验，替换成你自己的表单选择器
   const targetForm = document.querySelector("form");
   targetForm.addEventListener("submit", function(e) {
     const userSelected = document.getElementById("selected_option").value;
     // 已超时且用户未做选择时，直接阻止提交
     if (isCountdownEnd && !userSelected) {
       e.preventDefault();
       alert("倒计时已结束，您未选择任何选项，无法提交表单");
       return false;
     }
   })
   

这个方案不依赖按钮本身的校验能力，通过独立状态存储+提交事件拦截双重保障，不会受id重复、原生校验规则限制的影响，兼容性和稳定性都更好。

内容的提问来源于stack exchange，提问作者ceins