T
TanStack•3mo ago
foreign-sapphire

how to switch to onChange validation after doing onBlur validation for better user experience ?

this code works. but if the user encounters an error and goes back to fix an input, the user doesnt know when the error was fixed. since it uses onBlur to check. I dont want onChange to be done in the start either ( immediately gets an error when the user starts typing that the email is invalid ) so how could i initially validate with an onBlur ( so user doesn't get an error till they type it out and switches to the next field ) but if they do get an error, i want the user to know when the error was fixed while the user types it out. ( onChange ) react-hook-form does this automatically. maybe i'm missing something. but i love form composition in tanstack. main reason why i use it. 
const form = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    onSubmit: async (data) => {
      await new Promise(r => setTimeout(r, 2000));
      let res = server.auth.webUserLogin({ email: data.value.email, password: data.value.password })
      console.log(res);
    }
  })
  return <div className='w-full h-full! flex flex-col justify-center items-center'>
    <Card className='w-full max-w-md'>
      <CardContent>
        <div className='flex flex-col space-y-5 p-5'>
          <h4 className="text-center mb-5 scroll-m-20 text-xl font-semibold tracking-tight">
            {t("auth_login")}
          </h4>

          <form.AppField
            name="email"
            validators={{ onBlur: z.string().email({ message: t("email_valid") }).min(1, t("field_required", t("email"))) }}
            children={(field) => <field.TextField label="Email" />}
          />
          <form.AppField
            name="password"
            validators={{ onBlur: z.string().min(1, t("field_required", t("password"))) }}
            children={(field) => <field.PasswordField label="Password" />}
          />
          <form.AppForm>
            <form.SubmitButton label={t("login")} />
          </form.AppForm>
        </div>
      </CardContent>
    </Card>
  </div>
const form = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    onSubmit: async (data) => {
      await new Promise(r => setTimeout(r, 2000));
      let res = server.auth.webUserLogin({ email: data.value.email, password: data.value.password })
      console.log(res);
    }
  })
  return <div className='w-full h-full! flex flex-col justify-center items-center'>
    <Card className='w-full max-w-md'>
      <CardContent>
        <div className='flex flex-col space-y-5 p-5'>
          <h4 className="text-center mb-5 scroll-m-20 text-xl font-semibold tracking-tight">
            {t("auth_login")}
          </h4>

          <form.AppField
            name="email"
            validators={{ onBlur: z.string().email({ message: t("email_valid") }).min(1, t("field_required", t("email"))) }}
            children={(field) => <field.TextField label="Email" />}
          />
          <form.AppField
            name="password"
            validators={{ onBlur: z.string().min(1, t("field_required", t("password"))) }}
            children={(field) => <field.PasswordField label="Password" />}
          />
          <form.AppForm>
            <form.SubmitButton label={t("login")} />
          </form.AppForm>
        </div>
      </CardContent>
    </Card>
  </div>
7 Replies
ambitious-aqua
ambitious-aqua•3mo ago
We're planning a way to fine tune how validation should work, but for now, you can add the following field listener: 
listeners={{
  // we want to check on every change
  onChange: ({ fieldApi }) => {
     // If there are blur errors present
     if (fieldApi.state.meta.errors.length > 0) {
        // trigger blur validation
        fieldApi.validate('blur');
     }
  },
}}
listeners={{
  // we want to check on every change
  onChange: ({ fieldApi }) => {
     // If there are blur errors present
     if (fieldApi.state.meta.errors.length > 0) {
        // trigger blur validation
        fieldApi.validate('blur');
     }
  },
}}
@divineflu ^
foreign-sapphire
foreign-sapphireOP•3mo ago
that worked. thank you. 🫶 i took it out and put into my whole form and wrote this to reuse it without boilerplate. wish i could put it in useFormHook or somewhere so i dont have to write that single line again but this is good enough. I'm just trying to remove as much boilerplate as possible. as forms are just 70% of our site. 
export function validateOnChange({ fieldApi }: { fieldApi: AnyFieldApi }) {
  // If there are blur errors present
  if (fieldApi.state.meta.errors.length > 0) {
    // trigger blur validation
    fieldApi.validate('blur');
  }
}
export const validateChangeListener = {
  onChange: validateOnChange
}


// form 
const form = useAppForm({
  defaultValues: {
    email: "",
    password: "",
  },
  listeners: validateChangeListener,
})
export function validateOnChange({ fieldApi }: { fieldApi: AnyFieldApi }) {
  // If there are blur errors present
  if (fieldApi.state.meta.errors.length > 0) {
    // trigger blur validation
    fieldApi.validate('blur');
  }
}
export const validateChangeListener = {
  onChange: validateOnChange
}


// form 
const form = useAppForm({
  defaultValues: {
    email: "",
    password: "",
  },
  listeners: validateChangeListener,
})
ambitious-aqua
ambitious-aqua•3mo ago
you'll want to migrate to AnyFormApi instead then since this is a form listener but yeah, if everything works out well, the plan would be that you could specify similar to RHF's revaliateMode
vicious-gold
vicious-gold•4d ago
Has this made it into the library in an official capacity yet?
ambitious-aqua
ambitious-aqua•4d ago
yes! Check the Dynamic Validation in the docs
vicious-gold
vicious-gold•4d ago
I looked into that, but it seemed to only support a "before submission" and "after submission". But I was looking for a way, like you suggested here, to defer onChange validation for a given field (or all fields) until the first onBlur event is fired for the field. So more of a "before Some Event" and "after Some Event" modes, with an arbitrary event being the trigger instead of just submission.
ambitious-aqua
ambitious-aqua•4d ago
oh, apologies. I was hasty with the reply because I saw revalidateMode. Yes, you're right that that validation logic is reserved for before and after submission. The issue is that your suggestion of blur first, change later makes little sense for form level validators. They would only apply to the first field that triggered on blur and would not be field specific. This probably means we'll add in a field logic function sometime, which would determine when errors are sent to the field. Maybe. It could be problematic since the form will still remember the errors and it has some other side effects apart from just sending errors to fields. I see that this is somewhat of an old suggestion. I have another suggestion in the meantime that should implement this better: 
const form = useForm({
   validators: {
      onChange: mySchema
   }
})

// use-field-error.tsx
export function useFieldError(field: AnyFieldApi) {
   const submissionAttempts = useStore(field.form.store, state => state.submissionAttempts);
   const isBlurred = useStore(field.store, state => state.meta.isBlurred);
   const errors = useStore(field.store, state => state.meta.errors);
   
   // The user either tried to submit immediately (without blurring fields), or has blurred this field.
   // this means attempting to submit will reveal all errors that are around.
   const showErrors = submissionAttempts > 0 || isBlurred;

   return { submissionAttempts, isBlurred, errors: showErrors ? errors : [] }
}

// text-field.tsx
export function TextField() {
   const field = useFieldContext<string>();
   const { errors } = useFieldError(field);
}
const form = useForm({
   validators: {
      onChange: mySchema
   }
})

// use-field-error.tsx
export function useFieldError(field: AnyFieldApi) {
   const submissionAttempts = useStore(field.form.store, state => state.submissionAttempts);
   const isBlurred = useStore(field.store, state => state.meta.isBlurred);
   const errors = useStore(field.store, state => state.meta.errors);
   
   // The user either tried to submit immediately (without blurring fields), or has blurred this field.
   // this means attempting to submit will reveal all errors that are around.
   const showErrors = submissionAttempts > 0 || isBlurred;

   return { submissionAttempts, isBlurred, errors: showErrors ? errors : [] }
}

// text-field.tsx
export function TextField() {
   const field = useFieldContext<string>();
   const { errors } = useFieldError(field);
}
I also have a hook I use at my workplace which is a bit more complicated (and has some issues with linked fields). But I'll happily share that too if you want. To summarize, 'dynamic' validation is a lot easier to manage on field level than on form level, so showing the error is how you imitate the field-level dynamic validator

Did you find this page helpful?