0

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?

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184

2 Answers2

-1

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

AdamRaichu
  • 149
  • 1
  • 13
  • The problem is I need to allow none to be checked too. – Brett DeWoody Oct 28 '21 at 12:52
  • You can reset them using a reset button. [https://www.w3schools.com/tags/att_input_type_reset.asp](https://www.w3schools.com/tags/att_input_type_reset.asp) – AdamRaichu Oct 28 '21 at 13:01
  • Not really what I'm looking for. The 2 checkboxes are distinct items (and I could add a 3rd checkbox, independent of the other 2) - radio buttons aren't really suitable here. There is logic in the form to disable checkbox1 when checkbox2 is selected, and vice versa. But I'm trying to validate that only 1 is selected, using `yup` - that is the question here. – Brett DeWoody Oct 28 '21 at 13:05
  • Ok, sorry this didn't help. – AdamRaichu Oct 28 '21 at 13:09
-1

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.

Ojas Mahajan
  • 42
  • 3