How to trigger validation on submit (to show errors)?

I run my validators (zod schema) via

onChange

onChange

and show my errors only if the field is blurred like this:

export function getFieldError(field: AnyFieldApi) {
  if (!field.state.meta.isBlurred) {
    return
  }

  return field.state.meta.errors[0]?.message
}

export function getFieldError(field: AnyFieldApi) {
  if (!field.state.meta.isBlurred) {
    return
  }

  return field.state.meta.errors[0]?.message
}

This works fine and also revalidates if I change the field with an error, but it doesn't validate if the fields weren't touched yet and I hit the submit button.

How can I trigger this or which fields do I need to check within the

getFieldError

getFieldError

function? When I click the submit button it should automatically trigger validation on every field and show the error message there.

So what I want is basically:
- show error message on blurred fields
- hide error when typing inside error fields and value is valid
- don't validate fields while typing that weren't touched
- validate every field if form is submitted, regardless touched or not

TanStack•11mo ago•

5 replies

sad-indigo

How to trigger validation on submit (to show errors)?

I run my validators (zod schema) via

onChange

onChange

and show my errors only if the field is blurred like this:

export function getFieldError(field: AnyFieldApi) {
  if (!field.state.meta.isBlurred) {
    return
  }

  return field.state.meta.errors[0]?.message
}

export function getFieldError(field: AnyFieldApi) {
  if (!field.state.meta.isBlurred) {
    return
  }

  return field.state.meta.errors[0]?.message
}

getFieldError

getFieldError

How to trigger validation on submit (to show errors)?

How to trigger validation on submit (to show errors)?

Similar Threads