T
TanStack•2mo ago
adverse-sapphire

RHF's onTouched mode

Is it possible to mimic the behavior of React Hook Form's onTouched mode? There doesn't appear to be an equivalent option for validators. https://www.react-hook-form.com/api/useform/#mode
useForm
Performant, flexible and extensible forms with easy-to-use validation.
10 Replies
xenial-black
xenial-black•2mo ago
are you using field-level validators or form-level validators? the easiest way to mimic this is to use a form-level onChange validator, and only show errors in fields if isBlurred: true
adverse-sapphire
adverse-sapphireOP•2mo ago
form-level validators
xenial-black
xenial-black•2mo ago
isBlurred is currently a one-way change, it won't be set to false if the field isfocused 
const form = useForm({
    // ...
    validators: {
       onChange: // ...
    }
})

<form.Field name="foo">
   {field => <>
     {/* ... */}
     {field.state.meta.isBlurred && !field.state.meta.isValid && (
        <>{/* Display field.state.meta.errors */}</>
     )}
   </>}
</form.Field>
const form = useForm({
    // ...
    validators: {
       onChange: // ...
    }
})

<form.Field name="foo">
   {field => <>
     {/* ... */}
     {field.state.meta.isBlurred && !field.state.meta.isValid && (
        <>{/* Display field.state.meta.errors */}</>
     )}
   </>}
</form.Field>
adverse-sapphire
adverse-sapphireOP•2mo ago
Your example is very similar to what I have atm. The only thing missing behavior-wise is: when you focus on a field, make no changes, then focus out. No error message appears, because no validations have ran due to no change event. Where as with RHF's onTouched mode, the error would appear, because validations are initially triggered on the first blur event. After that, it switches to being triggered on every change event.
xenial-black
xenial-black•2mo ago
I see. This behaviour should only happen on the initial blur before changes have happened, right?
adverse-sapphire
adverse-sapphireOP•2mo ago
That's correct
xenial-black
xenial-black•2mo ago
I suppose this may warrant another validateLogic implementation. We currently have one emulating revalidateMode, but that would be bound to submit, not to first vs. rest. I'll see if there's good ways to implement that sometime. In the meantime, this will work well enough to avoid duplicate errors (from having onBlur validators as well as onChange) 
listeners: {
   onBlur: ({ formApi }) => {
      // The form hasn't been interacted with yet.
      // note that this is not the same as RHF's !isDirty.
      // See https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts#understanding-isdirty-in-different-libraries
      if (formApi.state.isPristine) {
         // trigger the change validator
         formApi.validate('change')
      }
   }
}
listeners: {
   onBlur: ({ formApi }) => {
      // The form hasn't been interacted with yet.
      // note that this is not the same as RHF's !isDirty.
      // See https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts#understanding-isdirty-in-different-libraries
      if (formApi.state.isPristine) {
         // trigger the change validator
         formApi.validate('change')
      }
   }
}
adverse-sapphire
adverse-sapphireOP•2mo ago
It works great! Thank you so much 🙏 And it would be great to expand revalidateLogic to stuff outside of first-submit, like in this use case.
xenial-black
xenial-black•2mo ago
oh, oops. Yes, formApi.state.isPristine is the correct one I think the use case can be boiled down to: 
validationLogic: multipleEvents(['change', 'blur']),
validators: {
   onDynamic: // ...
}
validationLogic: multipleEvents(['change', 'blur']),
validators: {
   onDynamic: // ...
}
or do you need to differentiate between events and this is the one edge case where it should be triggered?
adverse-sapphire
adverse-sapphireOP•2mo ago
A way to do onTouched is just the one use case that I needed. I personally don't need anything more custom than what tanstack-form already allows me to very easily. But I do think that the onTouched behavior is a common enough use case in the world form management that it would be great if it was documented on tanstack.com

Did you find this page helpful?