javascript - 为什么此表单验证空输入值失败？

Question

在我的代码中有一个名为 fitness 的单选按钮组其中有六个选项，它们的值来自 1至6 。 我编写了一个函数来检查用户是否选择了上述选项之一:

function fitnessValidate(form) { // Javascript function to check whether the user has selected some fitness option
  if (document.getElementById("fitness").value == null) { // Checking whether user has selected some option
    window.alert("Please select an option"); // If user has not selected an option providing an alert
    
    return false;
  }
  
  return true; // This function will only return true when user has selected a fitness option
}

<table width="800" border="0" cellpadding="10" cellspacing="10" bordercolor="#FFFFFF" style="padding-left:15px;">
  <tr>
    <td width="392"><input type="radio" id="fitness" name="fitness" value="1" /> More than 1 hour – I will walk slowly and take several breaks
    </td>
  </tr>
  <tr>
    <td width="392"><input type="radio" id="fitness" name="fitness" value="2" />1 hour - I will walk all the way in a normal pace
    </td>
  </tr>
  <tr>
    <td width="392"><input type="radio" id="fitness" name="fitness" value="3" />45 minutes– I will walk all the way in a fast pace
    </td>
  </tr>
  <tr>
    <td width="392"><input type="radio" id="fitness" name="fitness" value="4" />35 minutes – I will run in at an easy pace and take a few walking breakes</td>
  </tr>
  <tr>
    <td width="392"><input type="radio" id="fitness" name="fitness" value="5" />30 minutes – I will run all the way in a moderate pace</td>
  </tr>
  <tr>
    <td width="392"><input type="radio" id="fitness" name="fitness" value="6" />20 minutes – I will run all the way in a very high pace</td>
  </tr>
  <tr>
    <td width="392"><input type="submit" name="submit" value="Submit" /></td>
  </tr>
</table> 

这是我的<form> :

<form name="fitness" action="" method="post" onsubmit="return fitnessValidate(this)">

但即使用户未选择选项，它也会提交。谁能告诉我这是什么原因？

Answer 1

请尝试此代码

从单选按钮中删除“ID”并修复您的 JS 函数

<form name="fitness" action="" method="post" onsubmit="return fitnessValidate(this)">
<table width="800" border="0" cellpadding="10" cellspacing="10" bordercolor="#FFFFFF" style="padding-left:15px;">
    <tr>
        <td width="392">
            <input type="radio" name="fitness" value="1" />More than 1 hour – I will walk slowly and take several breaks</td>
    </tr>
    <tr>
        <td width="392">
            <input type="radio" name="fitness" value="2" />1 hour - I will walk all the way in a normal pace</td>
    </tr>
    <tr>
        <td width="392">
            <input type="radio" name="fitness" value="3" />45 minutes– I will walk all the way in a fast pace</td>
    </tr>
    <tr>
        <td width="392">
            <input type="radio" name="fitness" value="4" />35 minutes – I will run in at an easy pace and take a few walking breakes</td>
    </tr>
    <tr>
        <td width="392">
            <input type="radio" name="fitness" value="5" />30 minutes – I will run all the way in a moderate pace</td>
    </tr>
    <tr>
        <td width="392">
            <input type="radio" name="fitness" value="6" />20 minutes – I will run all the way in a very high pace</td>
    </tr>
    <tr>
        <td width="392">
            <input type="submit" name="submit" value="Submit" />
        </td>
    </tr>
</table>

<script type="text/javascript">
function fitnessValidate(form) { // Javascript function to check whether the user has     selected some fitness option   

   var radiobuttons = document.getElementsByName("fitness");
   var checked = false;
   for (var i = 0; i < radiobuttons.length; i++) {
       if (radiobuttons[i].checked) {
           checked = true;
           return true; // This function will only return true when user has selected a fitness option
       }
   }

if (!checked) {
       window.alert("Please select an option"); // If user has not selected an option providing an alert
       return false;
}
</script>