点击单选框No无法跳转下一题，如何跳过隐藏关联字段的表单验证？

要解决隐藏字段也参与校验的问题，核心调整是在校验逻辑里过滤掉处于不可见状态的输入项，仅校验用户可见的字段即可，修改代码如下：

1. 修改表单校验函数 #

你可以直接复用现有项目已经引入的jQuery的可见性判断能力，修改validateForm函数：

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // 新增逻辑：跳过隐藏状态的输入字段
    if ($(y[i]).is(':hidden')) {
      continue;
    }
    // 加trim方法避免全空格的无效输入被判定为合法
    if (y[i].value.trim() == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

jQuery的:hidden选择器会自动判断元素本身或其父级是否为display: none隐藏状态，完全适配你现有的条件显示逻辑，无需额外调整其他代码。
如果不想依赖jQuery实现可见性判断，也可以用原生JS实现判断逻辑：

// 原生JS判断元素是否可见的工具函数
function isElementVisible(el) {
  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}

// 对应修改校验函数里的判断逻辑即可
if (!isElementVisible(y[i])) {
  continue;
}

2. 可选优化：隐藏时清空字段残留值 #

建议补充切换隐藏时清空对应区域输入值的逻辑，避免提交时带上无效的历史输入，同时清除残留的错误样式：

$(document).ready(function() {
    $(".toggle-trigger").change(function(event) {
        $(".toggle-trigger").each(function(index, element) {
            var $element = $(element);
            var $toggleArea = $($element.data("toggle-area"));
            if($element.is(":checked")) {
                $toggleArea.show();
            } else {
                $toggleArea.hide();
                // 新增：隐藏时清空区域内输入值、移除错误样式
                $toggleArea.find('input').val('').removeClass('invalid');
            }
        });
    });
});

另外你现有HTML里No选项的data-toggle-area="#q1-no"没有对应的DOM元素，属于冗余属性，可直接删除不影响功能。

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