HTML表单验证与提交冲突解决办法

以下是优化后的完整实现：

<form id="inputForm">
  <h2 class="subHead">Enter Basic Information</h2>
  <label for="fname" class="form">First name:</label><br><br>
  &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot; size=&quot;25&quot; style=&quot;font-size:25px;&quot; placeholder=&quot;John&quot; required&gt;<br><br>

  <label for="lname" class="form">Last name:</label><br><br>
  &lt;input type=&quot;text&quot; id=&quot;lname&quot; name=&quot;lname&quot; size=&quot;25&quot; style=&quot;font-size:25px;&quot; placeholder=&quot;Doe&quot; required&gt;<br><br>

  <label for="jnum" class="form">Job number:</label><br><br>
  &lt;input type=&quot;text&quot; id=&quot;jnum&quot; name=&quot;jnum&quot; size=&quot;25&quot; style=&quot;font-size:25px;&quot; 
         pattern=&quot;[A-Z]-[0-9]{4}&quot; title=&quot;Format: A-1234&quot; 
         placeholder=&quot;A-1234&quot; required&gt;<br>

  <h2 class="subHead">Select Operation</h2>
  <div>
    <label class="form">&lt;input type=&quot;radio&quot; name=&quot;operation&quot; value=&quot;cut&quot;&gt; Cut</label><br><br>
    <label class="form">&lt;input type=&quot;radio&quot; name=&quot;operation&quot; value=&quot;drill&quot;&gt; Drill</label><br><br>
    <label class="form">&lt;input type=&quot;radio&quot; name=&quot;operation&quot; value=&quot;fit up&quot;&gt; Fit Up</label><br><br>
    <label class="form">&lt;input type=&quot;radio&quot; name=&quot;operation&quot; value=&quot;weld&quot;&gt; Weld</label><br>
  </div>

  <h2 class="subHead">Enter Comments</h2>
  &lt;input type=&quot;text&quot; id=&quot;comment&quot; name=&quot;comment&quot; size=&quot;25&quot; style=&quot;font-size:25px;&quot; placeholder=&quot;Optional&quot;&gt;<br><br>

  &lt;input type=&quot;submit&quot; id=&quot;clockIn&quot; class=&quot;button&quot; value=&quot;Clock In&quot;&gt;
</form>

document.getElementById("inputForm").addEventListener("submit", function(e) {
  e.preventDefault(); // ✅ 关键：阻止默认提交，保留验证并控制流程

  // ✅ 安全获取单选值（防 null）
  const operationRadio = document.querySelector('input[name="operation"]:checked');
  const process = operationRadio ? operationRadio.value : null;

  // ✅ 手动触发原生验证（可选，但推荐用于显式反馈）
  const form = e.target;
  if (!form.checkValidity()) {
    // 浏览器会自动显示验证提示（如红框、tooltip），无需额外逻辑
    return;
  }

  // ✅ 验证必填单选
  if (!process) {
    alert("Please select an operation.");
    return;
  }

  // ✅ 收集数据
  const firstName = document.getElementById("fname").value.trim();
  const lastName = document.getElementById("lname").value.trim();
  const jobNumber = document.getElementById("jnum").value.trim();
  const comment = document.getElementById("comment").value.trim();
  const timeIn = new Date().toLocaleString();

  const info = [firstName, lastName, jobNumber, process, timeIn, comment];

  // ✅ 执行业务逻辑（如 Google Apps Script）
  google.script.run.addEntry(info);

  // ✅ 清空表单（注意：先清空 input 再重置 radio，避免状态错乱）
  document.getElementById("fname").value = "";
  document.getElementById("lname").value = "";
  document.getElementById("jnum").value = "";
  document.getElementById("comment").value = "";
  document.querySelectorAll('input[name="operation"]').forEach(r => r.checked = false);

  alert("Submitted successfully!");
});

? 关键注意事项：

• 永远优先监听 form.submit 而非 button.click —— 这是保障 HTML 原生验证生效的唯一可靠方式；
• 必须调用 e.preventDefault()，否则表单将按默认行为提交（通常是 GET 到当前 URL，造成空白页）；
• 单选按钮务必判空：querySelector(...:checked) 在无选中项时返回 null，不可直接 .value；
• form.checkValidity() 可主动触发验证检查，配合 reportValidity() 可强制显示浏览器提示（如需更精细控制）；
• 包裹 <input> 是最佳实践（如示例中所示），提升可访问性与点击区域，且避免 for/id 绑定疏漏；
• 若使用 Google Apps Script，确保 addEntry 函数已正确发布为 @OnlyCurrentDoc 或 @Public，且前端 google.script.run 上下文可用（通常在 G Suite Web App 环境中）。

通过以上结构化处理，既能享受 HTML 原生验证的简洁性与兼容性，又能完全掌控提交逻辑、用户体验与错误边界，彻底解决“验证失效”与“空白页”两大痛点。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML表单验证与提交冲突解决办法》文章吧，也可关注golang学习网公众号了解相关技术文章。