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?

can you show your complete code? – Reza Hashemi Feb 26 '20 at 22:21 — Reza Hashemi, Feb 26 '20 at 22:21

score 23 · Accepted Answer · answered Feb 26 '20 at 22:21

23

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.

answered Feb 26 '20 at 22:21

basarat

261,912
58
460
511

Thanks. Ill probably end up just showing the message for now on submit. – TResponse Feb 26 '20 at 22:25

score 2 · Answer 2 · answered Dec 23 '21 at 05:20

2

You can do:

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

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

answered Dec 23 '21 at 05:20

joshxfi

303
4
10

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. – TResponse Jan 18 '22 at 04:41
what is the `Contact`? – huykon225 Apr 13 '22 at 10:33
Schema Validation – Sudip Shrestha May 24 '22 at 04:35

score 1 · Answer 3 · answered Dec 05 '22 at 18:36

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

score 1 · Answer 4 · answered Mar 30 '23 at 03:53

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

score 0 · Answer 5 · answered Jun 17 '22 at 14:11

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

This does not answer the question as the question is how to Automatically trim white spaces with Yup and Formik. — TResponse, Jun 27 '22 at 03:41

Automatically trim white spaces with Yup and Formik

5 Answers5