时间戳

首页 > 解决方案 > 如何使用 javascript 验证是否选择了 1 个单选按钮

javascript - 如何使用 javascript 验证是否选择了 1 个单选按钮

问题描述

我是一个菜鸟，不知道如何为我的表单修复损坏的 javascript 验证。我相信问题出在我的选择器上（由 Not Working Comment 标识），但对 javascript 的了解不足以知道如何修复它。我正在尝试使用几种不同类型的输入制作一个表单，并验证每一个。我的语法适用于常规文本输入和下拉菜单，但不适用于收音机。简单的答案（我能理解）优于复杂的答案（我不能）。

我在这里看了很多这个问题，不想单独验证每个单选按钮，即如果选择 = 1 .. 如果选择 = 2 .. 如果选择 = 99，只有 1 个按钮已经选择。我不确定这是否需要一个 for 循环，或者是否有一种方法类似于我现有的适用于其他输入的代码。 

document.querySelector('form').onsubmit = function() {
  if (!document.querySelector('select[name=country]').value) {
    alert('You must choose a country');
    return false;
  }

  // <!--NOT WORKING PART-->    
  else if (!document.querySelector('custom-control-input[type=radio]:checked').value) {
    alert('You must select a gender');
    return false;
  }
  return true;
};
<div class="form-group">
  <select name="country">

    <option disabled selected value="">Country</option>
    <option value="Canada">Canada</option>
    </option>
    <option value="USA">USA</option>
    </option>
  </select>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="customRadio" id="customRadio1" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Male</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="customRadio" id="customRadio1" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Female</label>
</div>

标签： javascripthtmlbootstrap-4

解决方案

您在查询选择器中的参数是错误的。

这对我有用：

else if (!document.querySelector('[type=radio]').checked) {
    alert('You must select a gender');
    return false;
}

推荐阅读