Automatically trim white spaces with Yup and Formik

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?

Pak

can you show your complete code? – Maynord

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.

Deity

Thanks. Ill probably end up just showing the message for now on submit. – Pak

Answer 2

You can do:

onSubmit={(values) => {
  const castValues = Contact.cast(values)
})

reference: https://github.com/jaredpalmer/formik/issues/473#issuecomment-499476056

Sedgemoor

Thanks but that's not what I'm after. I know it can be done this way but the question was around doing it automatically. So the idea was to do it without manual code manipulation. I created a my own separate transform to do this. – Pak

what is the Contact? – Mesic

Schema Validation – Hereof

Answer 3

You can listen to the onBlur() event. Then trim the string to actually fix any trailing or leading spaces:

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

Additionally, to trimming for Yup for validation:

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'),
});

Earplug

Answer 4

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}
    />
  ...
)

Lifework

Answer 5

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} />

Falconet

This does not answer the question as the question is how to Automatically trim white spaces with Yup and Formik. – Pak