reactjs - Recortar automáticamente los espacios en blanco con Yup y Formik

Estoy usando un formulario Formik en React y la validación de Yup definida en un esquema:

export const Contact = yup.object<IContact>().shape({
  contactName: yup
    .string()
    .trim('The contact name cannot include leading and trailing spaces')
    .strict(true)
    .min(1, 'The contact name needs to be at least 1 char')
    .max(512, 'The contact name cannot exceed 512 char')
    .required('The contact Name is required'),
});

¿Hay una manera de hacer que Yup elimine los espacios en blanco sin mostrar un mensaje? ¿Así que eliminar automáticamente los espacios cuando se envía un formulario?

Respuesta #1

¿Hay una manera de que Yup elimine los espacios en blanco sin mostrar un mensaje?

No en una sola transformación. La transformación yup utilizada por formik es solo para validación. Puedes crear una transformación separada para usar antes de pasar los datos, pero es más sencillo simplemente valueToUse=userValue.trim() tú mismo.

Respuesta #2

Puedes escuchar el evento onBlur(). Luego recorta la cadena para realmente corregir cualquier espacio al principio o al final:

onBlur={() => setFieldValue('email', values.)}

Además, al recortar para Yup para la validación:

export const Contact = yup.object<IContact>().shape({
  contactName: yup
    .string()
    .trim()
    .strict(true)
    .min(1, 'The contact name needs to be at least 1 char')
    .max(512, 'The contact name cannot exceed 512 char')
    .required('The contact Name is required'),
});