Tengo un formulario con 2 casillas de verificación: la restricción es que se puede marcar un máximo de 1 de las casillas de verificación. En otras palabras, ambas casillas de verificación no se pueden marcar.
He agregado lógica al formulario para deshabilitar la otra casilla de verificación cuando se marca 1. Pero también me gustaría validar esto.
Mi intento fue este:
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' ]])Pero esto causa un comportamiento extraño: parece devolver una validación falsa cuando se verifica la primera y luego se verifica la segunda. Pero no devuelve una validación falsa si se verifica la segunda y luego se verifica la primera.
¿Es posible hacer una validación como esta?
En lugar de usar casillas de verificación, usaría el tipo de entrada = "radio". Esto solo permite seleccionar una de las opciones. Aquí hay algunos ejemplos de documentación de w3schools.com.