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

Question

我有一个使用单选按钮的表单，供用户选择 1-10 之间的评级。 其中一些问题需要在用户能够提交之前获得评级。 所以我在提交时调用函数 validateForm() 来这样做。

单选按钮示例：

          <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>

我的表单示例： Visual Example

对于“易于下订单”问题，我使用以下代码取得了成功：

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

我正在按它们的名称抓取单选按钮，这就是轻松评级。 这工作正常，用户无法提交，直到在此问题上选择评级。 但是，当我尝试将其应用于下一行时，因为这也是必需的，它似乎出错了。

    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;
    
   
}

它似乎只在提交之前承认“交付便利”的要求，而不是现在接受第一个问题的要求。

抱歉，我是新手，但我想要的是表格在继续之前检查每个问题是否选择了评级。 我不想使用 /required，因为我想在所需的评级下方插入自定义错误消息，这就是我没有使用它的原因。

谢谢你的帮助！

Answer 1

您过早地从for循环返回，这就是为什么conradios for循环所在的其余代码无法访问的原因。

通过放置return false; 语句就在for循环的最后一个花括号之前，而不是在它之后。

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

对第二个循环也执行相同的操作：

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