Repo to duplicate the problem: https://codesandbox.io/s/yup-react-hook-form-material-checkbox-5dqbm
I am working on a form that I created with react-hook-form and yup. I have a checkbox group and I am trying to require at least one checkbox to be selected before submitting. I created a checkbox group with Material UI and handled validation with yup test function.
Here are my default values showing the structure.
const defaultValues = {
companyName: "",
singleCheckbox: false,
multiCheckbox: { option1: false, option2: false }
};
And this is my yup validation. Basically, I am checking if one of the options of multiCheckbox is true, return true otherwise return false.
const yupSchema = yup.object().shape({
companyName: yup.string().required("Company name is required"),
singleCheckbox: yup.boolean().test("singleCheckbox", "Required", (val) => {
console.log(val, "yup singleCheckbox result");
return val;
}),
multiCheckbox: yup
.object()
.shape({
option1: yup.boolean(),
option2: yup.boolean()
})
.test(
"multiCheckbox",
"At least one of the checkbox is required",
(options) => {
console.log(
options.option1 || options.option2,
"yup multiCheckbox result"
);
return options.option1 || options.option2;
}
)
});
Problem: When I hit 'Submit' button without filling out any field, I see all the error messages that I should. And error messages are disappearing when I start filling the input form and clicking on the single checkbox but error message for multiCheckbox is not going away.
First I thought something is wrong with the test function, that's why I implemented the same logic to singleCheckbox as well. singleCheckbox is working as expected but multiCheckbox is not, even though test function of yup returns true.
What I have tried: I tried to change revalidation value of useForm to onBlur and onChange but it didn't work out for me.
Observation: Clicking on Submit button brings all the error messages. After selecting one of the options of multiCheckbox and hitting submit button again clears error message of multiCheckbox. So I am assuming there is a disconnection between yup validation and react-hook-form validation. But why same disconnection is not happening for single singleCheckbox?
Aucun commentaire:
Enregistrer un commentaire