TanStackT
TanStack•4w ago•
22 replies
full-green

custom error's from onSubmit validator doesn't show up. but zod validation errors does show.

this is what i use to show my field's errors. 
{isInvalid && <FieldError errors={field.state.meta.errors} />}

this shows zod validation errors just fine and shows multiple zod errors if it exists.

but when i return an error from the validators like this after a submit,

https://tanstack.com/form/latest/docs/framework/react/guides/validation#setting-field-level-errors-from-the-forms-validators

validators: {
  onSubmitAsync: async ({ value }) => {
    // Validate the value on the server
    const hasErrors = await verifyDataOnServer(value)
    if (hasErrors) {
      return {
        form: 'Invalid data', // The `form` key is optional
        fields: {
          age: 'Must be 13 or older to sign',
          // Set errors on nested fields with the field's name
          'socials[0].url': 'The provided URL does not exist',
          'details.email': 'An email is required',
        },
      }
    }

    return null
  },
},


the error doesn't show. but the field turns red and isInvalid becomes true.
any insight into why this might be happening ?
Thank you.
Was this page helpful?