Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

272
Vistas
Yup - validating only 1 checkbox is checked

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?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda