T
TanStack•8mo ago
harsh-harlequin

Activate onChange validation only after submitting once?

useForm({
...
    validators: {
      onChange: ({ formApi }) =>
        formApi.state.submissionAttempts > 0 ? loginSchema : undefined,
      onSubmit: loginSchema,
...
useForm({
...
    validators: {
      onChange: ({ formApi }) =>
        formApi.state.submissionAttempts > 0 ? loginSchema : undefined,
      onSubmit: loginSchema,
...
this doesn't seem to work
3 Replies
like-gold
like-gold•8mo ago
this is assigned once on mount, in which case it's always going to be false. you'll have to manually write the login schema safeParse if you want it to act conditionally
harsh-harlequin
harsh-harlequinOP•8mo ago
is there a way to achieve the same StandardSchema behaviour conditionally? As in not having to manually return the error object? I got it to work but it seems hacky 
useForm({
    ...
    validators: {
      onChange: ({ value, formApi }) => {
        if (formApi.state.submissionAttempts > 0) {
          return standardSchemaValidators.validate(
            {
              value,
              validationSource: "form",
            },
            loginSchema
          );
        }
        return undefined;
      },
      onSubmit: loginSchema,
    ...
useForm({
    ...
    validators: {
      onChange: ({ value, formApi }) => {
        if (formApi.state.submissionAttempts > 0) {
          return standardSchemaValidators.validate(
            {
              value,
              validationSource: "form",
            },
            loginSchema
          );
        }
        return undefined;
      },
      onSubmit: loginSchema,
    ...
I think there should be a better example of using standardSchemaValidators I might make a PR for the example
sensitive-blue
sensitive-blue•8mo ago
Why do you want to do that? Maybe you could just show the errors conditionally (submissionAttempts > 1)?

Did you find this page helpful?