Why does this form validation for empty input values fail?

In my code there is a radio button group called fitness which has six options and they have values from 1 to 6. I have written a function to check whether the user has selected one of the above options:

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> 

This is my <form>:

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

But it submits even if the user has not selected an option. Can someone tell me the reason for this?

Answer

if(document.getElementById(“fitness”).value==null)

Having multiple elements with the same ID is invalid. getElementById will return one of them (first? last? depending on browser), not all of them.

Since all of them have a value, the above expression will always return false.

Anyhow, in order to be successful (be submitted with the form), form controls must have a name, so just remove all the IDs (they don’t do anything useful).

Also, having a control with a name of submit replaces the form’s submit method, so if you attempt:

form.submit();

you’ll get an error as you’re trying to call the element named submit, not the method. So don’t give a control a name of “submit”.

So the function can be:

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
}

That will loop over all the controls with a name of “fitness” and return false if none of them are checked, or undefined if one is checked (so the form will submit).

The above will work in any browser that supports javascript.

Edit

As @Quasimodo’s clone suggests, the loop can be simplified to return if a checked radio button is found and do the error thing otherwise:

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

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

  // no radio is selected, show error and stop submission
  window.alert("Please select an option");
  return false;
}