'Validate form with Yup and react-hook-form
I have a form. It dynamically creates checkboxes with string values based on the list. There is also a text field in the form. With yup I need to validate that at least one checkbox is selected or a textbox contains an input. To create a form I use react-hook-form.
export const schema = yup.object({
items: yup.array().notOneOf([false], 'At least one option is required')
})
const {
register,
formState: {
errors = {},
},
reset,
handleSubmit,
} = useForm({
mode: 'onSubmit',
reValidateMode: 'onSubmit',
shouldUnregister: true,
resolver: yupResolver(schema)
});
const input = register('description');
<form onSubmit={submitForm}>
<div>
<div>
{docs.map((doc, i) => (
<div key={doc}>
<label>
<input type="checkbox"
id={doc}
name={`items[${i}]`}
value={doc}
{...register(`items[${i}]`)} />
</label>
</div>
))}
</div>
<TextField {...input}/>
</div>
</form>
I know that you can somehow use useFieldArray, but an error appears with the fact that initially a boolean value is stored in the checkbox, after selection, a text value is already stored there
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
