Question

我是Noob，他不知道如何解决表单损坏的javascript验证问题。我认为问题出在我的选择器上（由“不起作用的注释”标识），但是对JavaScript的了解不够深，无法知道如何解决它。我正在尝试使用几种不同类型的输入创建一个表单，并进行验证。我的语法适用于常规文本输入和下拉菜单，但不适用于收音机。简单的答案（我能理解）比复杂的答案（我不能理解）更容易。

我已经在这里讨论了这个问题，并且不想单独验证每个单选按钮，即，如果choice = 1 ..如果choice = 2。.如果choice = 99，则仅选择其中一个按钮已被选择。我不确定是否需要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>

Answer 1

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

这对我有用：

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

Answer 2

您已经通过id选择了每个元素而告诉了一个方法，而另一个则是以下

 function checkRadioButton() {
    return ($('input[type=radio]:checked').size() > 0);
}

它将检查整个页面并返回一个已选中的redio按钮。

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

2 个答案: