Transform / Cast form data before validating with YUP

[pedrosimao]

I am currently using YUP Schemas to validate all my form fields.
I want to be able to transform data of some fields before validating them. For instance, I would like to trim some strings.
YUP offers the trim() method, but this won't change output data, it will just temporarily transform data for validation, but original data stills the same.
YUP documentation says cast() transforms data while validate() checks that the input is the correct shape.
Unhappily I don't see a cast method to use together with useForm.
I am also not sure that using cast would be the correct approach.
Would you have any other suggestions on how to achieve this?

Thanks a lot for your inputs!

[bluebill1049]

please provide a simple codesandbox with your schema and cast, we do return value from yup at the submission level.

[pedrosimao]

@bluebill1049 I have tried to use your YUP validation CodeSandbox as a start for my example.
I trimmed the firstName, and it actually submits the trimmed data.
Then I found out why. In my code I was using the getValues() method, instead of data parameter (from onSubmit function).
Basically getValues returns non-validated data...
Thanks a lot for your input and your time.

[bluebill1049]

np, getValues is basically returning what's in the form.

[philipbulley]

@bluebill1049 is there a way similar to form.getValues or form.watch that will return the values from yup? The use case would be to use the yup transformed values for other purposes whilst the form is still being filled in, long before submission.

[jilherme]

I would be interested as well in getting transformed values without depending on submitted values. Currently we are saving the formatted data in a useState, but I don't think it's good this way