JavaScript 表单验证：检测全选“否”并弹出确认对话框-js教程-PHP中文网

JavaScript 表单验证：检测全选“否”并弹出确认对话框

本文介绍如何在 jquery 表单提交时，检测用户是否对当前选中的某节（section）所有问题均选择了“no”，并在触发“continue”按钮时弹出带“ok/cancel”的确认对话框，防止误提交。

本文介绍如何在 jquery 表单提交时，检测用户是否对当前选中的某节（section）所有问题均选择了“no”，并在触发“continue”按钮时弹出带“ok/cancel”的确认对话框，防止误提交。

在表单多节互斥（A/B/C 三选一）的业务场景中，仅校验“是否完成全部问题”或“是否只选一节”还不够——还需防范一种常见误操作：用户虽完整填写了某一节，但所有答案均为“No”。此时应主动提示用户确认其意图，避免因疏忽导致无效提交。

实现的关键在于：在 validateFinish() 函数中，于通过基础校验后，进一步提取当前被触碰（touched）节内所有已选 radio 值，并判断是否全部为 "No"。jQuery 提供了简洁高效的方案：

精准获取每题选中值：使用 $("input[name='"+name+"']:checked").val() || false 替代原逻辑中的布尔标记，确保捕获实际选项（"Yes" 或 "No"），而非仅判断是否勾选；
批量判断全为“No”：利用 Object.values(inputs).every(q => q === 'No') 高效验证所有答案是否一致为 "No"；
阻断并交互提示：若判定为全“No”，调用原生 confirm() 弹出模态对话框；用户点击“Cancel”时执行 ev.preventDefault() 中止提交。

以下是整合后的核心验证逻辑（已适配 jQuery 1.8.2+）：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

function validateFinish(ev) {
  var sectionsTouched = $("tbody").has(":checked"),
      inputs = {},
      errorMessage = "";

  // 基础校验：未选任何节 / 多节同时填写
  if (sectionsTouched.length === 0) {
    errorMessage = "Please check something before submitting.";
  } else if (sectionsTouched.length > 1) {
    errorMessage = "Please complete A or B or C only";
  } else {
    // 提取当前节所有题目的选中值（Yes/No）
    sectionsTouched.find("input[type='radio']").each(function () {
      var name = $(this).attr("name");
      inputs[name] = $("input[name='" + name + "']:checked").val() || false;
    });

    // 检查是否有未答题
    $.each(inputs, function (k, v) {
      if (!v) {
        errorMessage = "It appears you have not completed all questions.";
        return false; // 退出 $.each
      }
    });

    // 新增：检查是否全为"No"
    if (!errorMessage) {
      var isAllNo = Object.values(inputs).every(function (q) {
        return q === "No";
      });

      if (isAllNo) {
        if (!confirm("You have selected \"No\" for your answers. Do you wish to continue?")) {
          ev.preventDefault();
          return false;
        }
      }
    }
  }

  // 统一错误处理
  if (errorMessage !== "") {
    $("#error").html(errorMessage);
    ev.preventDefault();
    return false;
  }

  return true;
}

✅ 注意事项：

confirm() 是浏览器原生模态框，样式不可定制；如需美化（如自定义 OK/Cancel 按钮、图标或主题），建议改用 Bootstrap Modal、SweetAlert2 等 UI 库；
当前逻辑仅对“被触碰的节”生效（即 sectionsTouched 所指的），符合“三选一”前提，不会跨节误判；
若未来表单结构变化（如新增 Section 或动态生成字段），请同步更新 sectionsTouched 的选择器逻辑；
$("input[name='"+name+"']:checked") 使用字符串拼接需确保 name 值安全（本例中为静态命名，无 XSS 风险）；若 name 含特殊字符，应先转义。

该方案轻量、兼容性强，无需引入额外依赖，即可在保留原有校验逻辑的基础上，无缝增强用户交互体验与数据有效性保障。