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

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>