如何在表单提交上检查单选按钮 - JavaScript

Question

I have a form using radio buttons for the user to select a rating between 1-10. Some of these questions are required to have a rating before the user is able to submit. So i call for the function validateForm() on submit to do so.

Example of radio buttons:

          <div class="fluid_container">
    <label for="ease-rating-0">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-0" value="0" />
<div class="box-number-half number-padding">0</div>
    </label>

      <label for="ease-rating-1">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-1" value="1" />
<div class="box-number-half number-padding">1</div>
</label>

      <label for="ease-rating-2">
 <input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-2" value="2" />
<div class="box-number-half number-padding">2</div>
</label>

      <label for="ease-rating-3">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-3" value="3" />
<div class="box-number-half number-padding">3</div>
</label>

      <label for="ease-rating-4">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-4" value="4" />
<div class="box-number-half number-padding">4</div>
</label>  
          
          
    <label for="ease-rating-5">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-5" value="5" />
<div class="box-number-half number-padding">5</div>
</label>

      <label for="ease-rating-6">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-6" value="6" />
<div class="box-number-half number-padding">6</div>
</label>

      <label for="ease-rating-7">
 <input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-7" value="7" />
<div class="box-number-half number-padding">7</div>
            </label>

      <label for="ease-rating-8">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-8" value="8" />
<div class="box-number-half number-padding">8</div>
            </label>

      <label for="ease-rating-9">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-9" value="9" />
<div class="box-number-half number-padding">9</div>
</label>
          
         
      <label for="ease-rating-10">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-10" value="10" />
<div class="box-number-half">10</div>
</label>
      </div>

An example of my form: Visual Example

I have success with the following code for "ease of placing order" question:

function validateForm() {
    var easeradios = document.getElementsByName("ease-rating");
    
    for (var i = 0; i < easeradios.length; i++) {
        if (easeradios[i].checked) {
        return true;
        }
    } return false;
}

I am grabbing the radio buttons by their name which for this is ease-rating. This works fine and the user cannot submit until a rating is selected on this question. However when i try to apply the same to the next row as this is also required it seems to go wrong.

    function validateForm() {


var easeradios = document.getElementsByName("ease-rating");

for (var i = 0; i < easeradios.length; i++) {
    if (easeradios[i].checked) {
    return true;
    }
} return false;


var convradios = document.getElementsByName("conv-rating");

for (var i = 0; i < convradios.length; i++) {
    if (convradios[i].checked) {
    return true;
    }
} return false;
    
   
}

It seems to only acknowledge a requirement for "Convenience of delivery" before submitting instead of taking the first questions requirement now.

Sorry i'm new to this but what i want is for the form to check that a rating is selected on each question before proceeding. I don't want to use /required as i want to insert custom error message underneath the rating required which is why i haven't used that.

Thanks for your help!

Answer 1

Your are returning from the for loops too early, which is why the rest of the code where conradios for loop resides is unreachable.

Correct this by place the return false; statement just before the last curly brace of the for loop, not after it.

for (var i = 0; i < easeradios.length; i++) {
    if (easeradios[i].checked) {
      return true;
    }
    return false;
} 

Do the same for the second loop as well:

for (var i = 0; i < convradios.length; i++) {
    if (convradios[i].checked) {
      return true;
    }
    return false;
}