You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I know this feature has been asked before many times, but there's a missing concept must of the other threads are not mentioning, which is the validation.
The issue
The following is an example most of the other comments and replies are mentioning:
if you submit the form and go to the console, you'll see:
{optionalField: "",requiredField: "hello"}
This is normal, so people wanted to omit the empty strings, so the simple solution was to do it after submission, which of course works:
// change this: const submitHandler = (data) => console.log(data);constsubmitHandler=(data)=>console.log(omitEmptyStringsFromObject(data));// omitEmptyStringsFromObject is some method you'd build or call from any other library, ex lodash.
now, submitting the form shows the following in the console:
{requiredField: "hello"}
Great, now this solves the simple problem. However, most of us are using validation libraries like zod, for example, the following is the zod schema of the example above:
Now, optionalField is required to be 3 characters long if it was provided, if it was not provided, then no problem, it's optional.
Now the solution we used above can't work in this example:
const{ handleSubmit, register }=useForm({resolver: zodResolver(demoSchema),});constsubmitHandler=(data)=>console.log(omitEmptyStringsFromObject(data));// 👈 this does not workreturn(<formonSubmit={handleSubmit(submitHandler)}><input{...register("optionalField")}/><input{...register("requiredField")}/></form>);
If you try to submit the form with optionalField being unfilled, it will not get submitted, and it will show a validation error.
Now, in order to solve this problem, we have to spoil our beautiful Zod Schemas to look like this:
The given options above will execute onlywhenhandleSubmit() is invoked, and exactly before looking into the validation, so, the validation library used (ex: Zod) will receive the transformed data, instead of the original one.
For example, to solve the above issue, we could do this instead and it will always work:
constdemoSchema=z.object({optionalField: z.string().min(3).optional(),requiredField: z.string().min(3)})const{ handleSubmit, register }=useForm({omitEmptyStrings: true,resolver: zodResolver(demoSchema),});constsubmitHandler=(data)=>console.log(data);return(<formonSubmit={handleSubmit(submitHandler)}><input{...register("optionalField")}/><input{...register("requiredField")}/></form>);// # after submit, in the console, the output is:// {// requiredField: "hello"// }
🪄 Motivation:
This is a common use case, and it make us all happy 😊
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Intro
I know this feature has been asked before many times, but there's a missing concept must of the other threads are not mentioning, which is the validation.
The issue
The following is an example most of the other comments and replies are mentioning:
if you submit the form and go to the console, you'll see:
This is normal, so people wanted to omit the empty strings, so the simple solution was to do it after submission, which of course works:
now, submitting the form shows the following in the console:
Great, now this solves the simple problem. However, most of us are using validation libraries like zod, for example, the following is the zod schema of the example above:
Now, optionalField is required to be 3 characters long if it was provided, if it was not provided, then no problem, it's optional.
Now the solution we used above can't work in this example:
If you try to submit the form with
optionalField
being unfilled, it will not get submitted, and it will show a validation error.Now, in order to solve this problem, we have to spoil our beautiful Zod Schemas to look like this:
Which is:
The Suggestion 💡:
Add three new options to the
useForm()
Hook:trim: boolean
(default: true).omitEmptyStrings: boolean
(default: false).transformer: (data) => transformedData
.The given options above will execute only when
handleSubmit()
is invoked, and exactly before looking into the validation, so, the validation library used (ex: Zod) will receive the transformed data, instead of the original one.For example, to solve the above issue, we could do this instead and it will always work:
🪄 Motivation:
This is a common use case, and it make us all happy 😊
Beta Was this translation helpful? Give feedback.
All reactions