如何在JavaScript表单验证中使用条件逻辑实现关联字段校验

你新增的逻辑对单选按钮组的取值方式错误，是整个验证功能失效的核心原因。document.forms['myForm']['cartridge']获取到的是name为cartridge的所有单选按钮组成的节点集合，而非单个DOM元素，直接调用.value会在大部分浏览器中抛出异常，导致validateForm函数直接终止，所有校验逻辑都不会生效。

将你新增的逻辑替换为如下代码，插入到原有校验逻辑的末尾、函数结束前即可：

// 正确获取单选按钮选中值
const cartridgeRadios = document.forms['myForm']['cartridge'];
const selectedCartridge = Array.from(cartridgeRadios).find(item => item.checked);
const xcartridge = selectedCartridge ? selectedCartridge.value : '';

if (xcartridge === '1') {
  const xcover_art = document.forms['myForm']['cover_art'].value;
  if (xcover_art === '') {
    // 修正原有笔误proved为provide
    alert('If Cartridge is selected you must provide Cover Art');
    return false;
  }
}

// 原有函数没有明确返回校验通过标识，补充上避免表单提交异常
return true;

function validateForm() {
  let xgame_name = document.forms['myForm']['game_name'].value;
  if (xgame_name == '') {
    alert('Game Name must be filled out');
    return false;
  }
  let xdev_name = document.forms['myForm']['developer_name'].value;
  if (xdev_name == '') {
    alert('Developer Name must be filled out');
    return false;
  }
  let xdev_email = document.forms['myForm']['email'].value;
  if (xdev_email == '') {
    alert('Developer Email must be filled out');
    return false;
  }
  let xdemo_rom = document.forms['myForm']['demo_rom'].value;
  if (xdemo_rom == '') {
    alert('Demo Rom must be uploaded');
    return false;
  }

  let xpromo_image = document.forms['myForm']['promo_image'].value;
  if (xpromo_image == '') {
    alert('Promo must be uploaded');
    return false;
  }

  // 新增的单选按钮校验逻辑
  const cartridgeRadios = document.forms['myForm']['cartridge'];
  const selectedCartridge = Array.from(cartridgeRadios).find(item => item.checked);
  const xcartridge = selectedCartridge ? selectedCartridge.value : '';

  if (xcartridge === '1') {
    const xcover_art = document.forms['myForm']['cover_art'].value;
    if (xcover_art === '') {
      alert('If Cartridge is selected you must provide Cover Art');
      return false;
    }
  }

  return true;
}

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