Automatically trim white spaces with Yup and Formik - reactjs

Question

I am using a Formik React Form and Yup validation defined on a schema:
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'),
});
Is there a way to have Yup trim white spaces without showing a message? So automatically trimming the spaces when a form is submitted?

Answer 1

Is there a way to have Yup trim white spaces without showing a message
Not in a single transform. The yup transform used by formik is only for validation.
You can create a seperate transform to use before passing the data, but its simpler to just valueToUse = userValue.trim() yourself.

Answer 2

You can do:
onSubmit={(values) => {
const castValues = Contact.cast(values)
})
reference:
https://github.com/jaredpalmer/formik/issues/473#issuecomment-499476056

Answer 3

I was able to achieve automatic removal of white spaces in an email field by overriding the onChange method from formik object. This is not the best solution to this but it works fine, especially where spaces are not allowed anywhere in the input field.
const { errors, touched, getFieldProps } = formik;
const { onChange } = getFieldProps('email');
const emailFieldProps = {
...getFieldProps('email'),
onChange: (e) => {
e.target.value = e.target.value.trim();
onChange(e);
},
};
return (
...
<TextField
{...emailFieldProps}
error={Boolean(touched.email && errors.email)}
helperText={touched.email && errors.email}
/>
...
)

Answer 4

You can also trim entered text on the go to completely limit user from using spaces at the end (example uses react native components):
const {handleSubmit, values, errors} =
useFormik({
validationSchema: EmailSchema(),
initialValues: {email: ''},
onSubmit: values => tryLogin(values.email)
})
...
<TextInput
value={values.email}
onChangeText={text => handleChange('email')(text.trim())}
error={errors.email}
/>
<Button title='SUBMIT' onPress={handleSubmit} />