[英]Validation in React Hook Form to make sure at least one checkbox is checked?
我正在处理一个表单,其中有一部分需要至少选中一个复选框。 我正在使用 ReactJS 和 React Hook 表单。
这是我的render
function 中代码的复选框部分:
{/* 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:
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.");
}
}
如何集成我专门为此表单上的复选框组编写的验证 function? 如果单击提交按钮时用户没有选中至少一个复选框,我希望出现错误。 我不想使用 jQuery。
您的每个输入都应该有一个ref
属性,它将注册验证 function:
ref={register({
required: false,
validate: validateMedium })}
我们可以用不同的名字做什么?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.