jQuery下拉框切换字段显隐及必填验证实现问题求助

首先，你的验证代码失效的核心原因是：jQuery的.show()方法返回的是元素的jQuery对象，而非布尔值，不能直接用来判断元素是否可见。判断元素是否显示应该用.is(':visible')方法。

修正后的验证逻辑 #

可以编写一个单独的验证函数，在需要触发验证的时机（比如表单提交、下拉框切换后）调用：

function validateVisibleFields() {
  // 若有清除错误的函数，可在此先清除之前的错误
  // clearErr();

  // 检查field1是否可见且为空
  if (jq('#field1').is(':visible') && !jq.trim(jq('#field1').val())) {
    addErr(`A value for <a href="javascript:void(0)" onclick="jq('#field1').focus()">Field 1</a> is required.<br>`);
    return false;
  }

  // 检查field2是否可见且为空
  if (jq('#field2').is(':visible') && !jq.trim(jq('#field2').val())) {
    addErr(`A value for <a href="javascript:void(0)" onclick="jq('#field2').focus()">Field 2</a> is required.<br>`);
    return false;
  }

  return true;
}

优化原下拉框切换函数 #

可以在下拉框切换时同步触发验证（可选，根据需求调整），同时简化原函数逻辑：

function acc_type() {
  // 初始化隐藏字段
  jq('#field1, #field2').hide();

  jq('#dropdownID').on('change', function() {
    let selectedText = jq(this).find('option:selected').text();
    
    if (selectedText === "value1") {
      jq('#field1').show();
      jq('#field2').hide();
    } else if (selectedText === "value2") {
      jq('#field1').hide();
      jq('#field2').show();
    } else {
      jq('#field1, #field2').hide();
    }

    // 切换后触发验证（可选）
    validateVisibleFields();
  });
}

触发验证的时机 #

• 在表单提交时调用（阻止空字段提交）：

jq('form').on('submit', function(e) {
  if (!validateVisibleFields()) {
    e.preventDefault(); // 阻止表单提交
  }
});

• 或者在字段输入时实时验证：

jq('#field1, #field2').on('input', function() {
  validateVisibleFields();
});

关键细节说明 #

• 使用jq.trim()去除输入值的首尾空格，避免用户输入空格绕过验证。
• 修正了你原代码中onlick的拼写错误，正确写法为onclick。

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