Javascript 为什么此表单对空输入值的验证失败？

在我的代码中有一个单选按钮组，名为

fitness

，它有六个选项，它们的值从

1

到

6

。 我编写了一个函数来检查用户是否选择了上述选项之一：

函数fitnessValidate（form）{//Javascript函数，用于检查用户是否选择了某些适合性选项
if（document.getElementById（“fitness”）.value==null）{//检查用户是否选择了某些选项
window.alert（“请选择一个选项”）；//如果用户没有选择提供警报的选项
返回false；
}
return true；//此函数仅在用户选择适合选项时返回true
}

1个多小时——我会慢慢走，休息几次
1小时-我将以正常的速度走完全程
45分钟——我将以快节奏走完全程
35分钟–我将以轻松的速度跑步，并进行几次步行休息
30分钟–我将以中等配速跑完全程
20分钟–我将以非常高的配速跑完全程

您复制了输入元素的ID。HTML和W3C中不允许ID重复。请检查这个

<input type="radio" id="fitness" name="fitness" value="6"/>

if（document.getElementById（“fitness”）.value==null）

具有相同ID的多个元素无效。getElementById将返回其中一个（第一个？最后一个？取决于浏览器），而不是全部

因为它们都有一个值，上面的表达式将始终返回false

无论如何，为了成功（与表单一起提交），表单控件必须有一个名称，所以只需删除所有ID（它们不做任何有用的事情）

此外，使用名为submit的控件将替换表单的submit方法，因此如果您尝试：

form.submit();

当您试图调用名为submit的元素而不是方法时，将出现错误。因此，不要给控件命名为“提交”

因此，功能可以是：

function fitnessValidate(form) {
  var radios = form.fitness;
  var oneChecked = false;

  for (var i=0, iLen=radios.length; i<iLen && !oneChecked; i++) {
    oneChecked = radios[i].checked;
  }

  if (!oneChecked) {
    // no radio is selected, show error and stop submission
    window.alert("Please select an option");
    return false;
  }
  // No need to return true, any value other than false will allow the form to submit
}

函数fitnessValidate（表单）{
var无线电=形式适应度；
var oneChecked=false；
对于（var i=0，iLen=radios.length；i请尝试此代码

从单选按钮中删除“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>


1个多小时——我会慢慢走，休息几次
1小时-我将以正常的速度走完全程
45分钟——我将以快节奏走完全程
35分钟–我将以轻松的速度跑步，并进行几次步行休息
30分钟–我将以中等配速跑完全程
20分钟–我将以非常高的配速跑完全程



函数fitnessValidate（form）{//Javascript函数，用于检查用户是否选择了某些适合性选项
var radiobuttons=document.getElementsByName（“适合度”）；
var检查=假；
对于（var i=0；i
你应该根据名字来判断

<script type="text/javascript">
   function fitnessValidate(form){  // Javascript function to check whether the user has selected some fitness option
        var radios = document.getElementsByName("fitness");
        var flag = false;
        for(var i=0;i<radios.length;i++){
        if(radios[i].checked){  // Checking whether user has selected some option          
           flag=true;
        }
        if(flag){
            return true;
        }else{
           window.alert("Please select an option");  // If user has not selected an option providing an alert
           return false;
        }

   }
</script>


函数fitnessValidate（form）{//Javascript函数，用于检查用户是否选择了某些适合性选项
var radios=document.getElementsByName（“适合度”）；
var标志=假；
对于（var i=0；i您可以使用以下代码：

function fitnessValidate(form)
{ return null !== form.querySelector('input[name=fitness]:checked')
      || alert("Please select an option") || false;
}

但是，有一种更好的方法来注册事件侦听器：

// form tag should have the id="form-fitness" attribute
document.getElementById('form-fitness').addEventListener('submit', function(ev)
{ if(null === this.querySelector('input[name=fitness]:checked'))
  { alert("Please select an option");
    ev.preventDefault();
  }
});

顺便说一句：正如其他答案中已经提到的，ID必须是唯一的。删除单选按钮的ID属性或赋予它们唯一的属性。您的代码无效。
使用迭代时，如果找到选中的单选按钮，您可以返回。
for（var i=0，iLen=radios.length；i
function fitnessValidate(form)
{ return null !== form.querySelector('input[name=fitness]:checked')
      || alert("Please select an option") || false;
}

// form tag should have the id="form-fitness" attribute
document.getElementById('form-fitness').addEventListener('submit', function(ev)
{ if(null === this.querySelector('input[name=fitness]:checked'))
  { alert("Please select an option");
    ev.preventDefault();
  }
});