Yup - validating only 1 checkbox is checked-CodePudding

I have a form with 2 checkboxes - the constraint is that a max of 1 of the checkboxes can be checked. In other words, both checkboxes can't be checked.

I have added logic to the form to disable the other checkbox when 1 is checked. But I'd also like to validate this.

My attempt was this:

yup.object().shape({
  textInput: yup.string().trim().required('Text input is required.'),
  checkbox1: yup.boolean()
    .when('checkbox2', {
      is: true,
      then: yup.boolean().isFalse()
    }),
  checkbox2: yup.boolean()
    .when('checkbox1', {
      is: true,
      then: yup.boolean().isFalse()
    }),
}, [[ 'checkbox1', 'checkbox2' ]])

But this causes strange behavior - it seems to return a false validation when the first is checked, and then the second is checked. But doesn't return a false validation if the second is checked, and then the first is checked.

Is it possible to do a validation like this?

CodePudding user response：

I would instead of using checkboxes use the input type="radio". This only allows one of the choices to be selected. Here is some example documentation from w3schools.com.

https://www.w3schools.com/tags/att_input_type_radio.asp

CodePudding user response：

As mentioned in another answer you can use radio input types as it is the ideal option.

But if you want only checkboxes then go through this link. It has many interesting approaches.