T
TanStack•7mo ago
modern-teal

Different validation strategy when there is an error

Is it possible to set the validator to run onBlur by default but when there's an error in a field, revalidate that field using onChange? RHF has a onTouched mode for validation that take care of this
1 Reply
dependent-tan
dependent-tan•7mo ago
You can't disable certain validators but you can access the field state and return early 
validators={{
  onBlur: ({ value, fieldApi }) => {
    if (fieldApi.state.meta.errors.length) return false

    return yourValidationLogic()
  },
  onChange: ({ value, fieldApi }) => {
    if (!fieldApi.state.meta.errors.length) return false

    return yourValidationLogic()
  },
}}
validators={{
  onBlur: ({ value, fieldApi }) => {
    if (fieldApi.state.meta.errors.length) return false

    return yourValidationLogic()
  },
  onChange: ({ value, fieldApi }) => {
    if (!fieldApi.state.meta.errors.length) return false

    return yourValidationLogic()
  },
}}

Did you find this page helpful?