reactjs - react Hook 形式 : how can i validate a group of radio buttons or checkboxes to ensure at least one is selected

Question

我有一组复选框和一组 if radio ，我想使用 react Hook 表单进行验证，以确保在提交时未选择任何复选框时生成错误消息。

我曾尝试在他们的网站上使用表单生成器进行试验，但我无法弄清楚如何将一组项目作为单个验证单元进行验证。

<div>
  <span>Option A <input type="checkbox" value="A" /></span>
  <span>Option B <input type="checkbox" value="B" /></span>
  <span>Option C <input type="checkbox" value="C" /></span>
</div>
<...output a validation error if one or more checkboxes hasnt been checked within the group>

<div>
  <span>Option A <input type="radio" value="A" /></span>
  <span>Option B <input type="radio" value="B" /></span>
  <span>Option C <input type="radio" value="C" /></span>
</div>
<...output a validation error if one or more radios hasnt been checked within the group>

这可能吗？是否有正确的方法？

感谢您的时间和关注。

Answer 1

您将 react-hook-form 标记添加到您的问题中，但您的代码中没有任何相关内容。如果你确实在使用 React Hook Form，那么使用 schema validation 来完成你想要的事情是一种方法。通过 yup:

const schema = yup.object().shape({
  checkbox: yup.array().min(1),
  radio: yup.string().required(),
});

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <span>
        Checkbox 1
        <input type="checkbox" {...register('checkbox')} value="A" />
      </span>
      <span>
        Checkbox 1
        <input type="checkbox" {...register('checkbox')} value="B" />
      </span>
      <span>
        Checkbox 3
        <input type="checkbox" {...register('checkbox')} value="C" />
      </span>
      <p style={{ color: 'red' }}>
        {errors.checkbox && 'At least one checkobox must be selected'}
      </p>
      <span>
        <label>Radio 1</label>
        <input type="radio" {...register('radio')} value="A" />
      </span>
      <span>
        <label>Radio 2</label>
        <input type="radio" {...register('radio')} value="B" />
      </span>
      <span>
        <label>Radio 3</label>
        <input type="radio" {...register('radio')} value="C" />
      </span>
      <p style={{ color: 'red' }}>{errors.radio && 'Radio is required'}</p>
      <input type="submit" />
    </form>
  );
}

查看工作 stackblitz .

请注意，由于单选按钮选项是排他性的(只能选择一个)，您只是说该字段是必需的。