javascript - 在 React Hook 表单中验证以确保至少选中一个复选框？

Question

我正在处理一个表单，其中有一部分需要至少选中一个复选框。我正在使用 ReactJS 和 React Hook 表单。
这是我的 render 中代码的复选框部分功能:

{/* Checkbox group. User must select at least one medium. */}
<label><b>Medium (check all that apply): *</b></label>
<div>
 <label>
  <input type="checkbox" name="medium" value="Design & Illustration" onChange="validateMedium();"/><span>Design & Illustration</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Digital Art" onChange="validateMedium();"/><span>Digital Art</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Drawing" onChange="validateMedium();"/><span>Drawing</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Painting & Mixed Media" onChange="validateMedium();"/><span>Painting & Mixed Media</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Photography" onChange="validateMedium();"/><span>Photography</span>
 </label>
</div>

这是我尝试编写的用于验证复选框组的函数:

function validateMedium() {
    var mediumCheckboxes = document.getElementsByName("medium");
    var okay = false;

    for (var i = 0, len = mediumCheckboxes.length; i < len; i++) {
        if (mediumCheckboxes[i].checked) {
            okay = true;
            break;
        }
    }

    if (okay) {
        alert("Thank you");
    } else {
        alert("Please check at least one medium.");
    }
}

如何集成我专门为此表单上的复选框组编写的验证功能？如果用户在单击提交按钮时没有选中至少一个复选框，我希望出现错误。我不想使用 jQuery。

Answer 1

您的每个输入都应该有一个 ref prop 将注册验证函数:

  ref={register({
    required: false,
    validate: validateMedium })}