unwilling-turquoise

Is it expected to have validations run multiple times when submitting a form?

so if I have a zod schema and I want to run more narrow validations without having to parse my zod error schema, is it expected that this onChangeAsync function runs once after the change/debounce and again when the field is submitted? In my current form I am making an API request, but I am essentially making a double request once after the change and another when I submit the form. Am I expected to have these validators run twice if I implement my form this way?

const schema = z.object({
  name: z.string(),
  bio: z.string()
});

const CustomForm = () => {
  const form = useForm({
    defaultValues: {
      name: "",
      bio: "",
    },
    validators: {
      onSubmit: schema
    },
    onSubmit: async ({ value }) => {
      // do api request stuff
    }
  });

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    e.stopPropagation();

    form.handleSubmit();
  }

  return (
    <form onSubmit={onSubmit}>
      <form.AppField 
        name="name"
        validators={{
          onChangeAsyncDebounceMs: 300,
          onChangeAsync: ({ value }) => {
            if (!value.trim().length) return "Name is required";

            return "";
          },
        }}
        children={(field) => <field.TextField label="Name" />}
      />
      {/* other input field */}
      <form.AppForm>
        <form.SubscribeButton />
      </form.AppForm>
    </form>
  ) 
}

const schema = z.object({
  name: z.string(),
  bio: z.string()
});

const CustomForm = () => {
  const form = useForm({
    defaultValues: {
      name: "",
      bio: "",
    },
    validators: {
      onSubmit: schema
    },
    onSubmit: async ({ value }) => {
      // do api request stuff
    }
  });

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    e.stopPropagation();

    form.handleSubmit();
  }

  return (
    <form onSubmit={onSubmit}>
      <form.AppField 
        name="name"
        validators={{
          onChangeAsyncDebounceMs: 300,
          onChangeAsync: ({ value }) => {
            if (!value.trim().length) return "Name is required";

            return "";
          },
        }}
        children={(field) => <field.TextField label="Name" />}
      />
      {/* other input field */}
      <form.AppForm>
        <form.SubscribeButton />
      </form.AppForm>
    </form>
  ) 
}

5 Replies

national-gold•3mo ago

yes. It ensures that users that don‘t change values and immediately click submit have valid inputs

unwilling-turquoiseOP•3mo ago

Hmmmm is there anyway I can prevent this, if I am performing API requests? to only run during their intended fn invocation or would I have to implement that logic myself

national-gold•3mo ago

we're planning a way to customize the validation logic for cases like this. For now, a change validator will run the most out of all the validators listeners are completely separate and do not cascade like this, so if it's just an API request without validation you should put it there instead

unwilling-turquoiseOP•3mo ago

hmmmm I see I guess my use case is kinda like a validator. It would be a user customized subdomain, so I need to make sure the value does not exist I don't see a reason to make it a listener unless when listeners run do they also disable a form as well with the canSubmit/isSubmitting values anyways thank you for the insight I appreciate it

national-gold•3mo ago

thanks for the input! This is good feedback for that API plan

Gaming

Programming

Is it expected to have validations run multiple times when submitting a form?

Did you find this page helpful?