React Hook Form中的验证，以确保至少选中一个复选框

Question

我正在处理一个表单，其中有一部分需要选中至少一个复选框。我使用的是ReactJS和ReactHookForm。

以下是我的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道具，它将注册验证函数：

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

Answer 2

重新审视这一点，2023

您的每一个复选框输入都需要使用react hook表单进行注册，类似这样。。。

<input
type="checkbox"
value="Photography" 
{...register("medium", {
validate: atLeastOneMediumChecked,
})}
/>
// etc..
<input
type="checkbox"
value="Drawing" 
{...register("medium", {
validate: atLeastOneMediumChecked,
})}
/>

然后，您需要定义验证函数。。。

// validation, at least one medium checkbox needs to be ticked
function atLeastOneMediumChecked(selectedMediums: string[]) {
return selectedMediums.length > 0;
}

这将使您能够检查表单提交中的错误，并将其放在页面上的某个位置(假设您想提醒用户(

{errors.medium && (
<span>
At least one medium selection is required
</span>
)}

*从技术上讲，您实际上只需要用组中的一个复选框输入注册验证函数，因为RHF只需要运行一次，即该函数检查包含组中检查的所有值的数组