Validation on Blur Fires the Form's onSubmit - Is that expected?

[kevinhpage]

I am using shouldValidate: 'onBlur'. When a blur occurs, my onSubmit function is firing. This is unexpected. How would I detect that the button was actually pressed before submitting the form?

In this example, tabbing between the 'input' fields will trigger 'onSubmit'. I wouldn't expect 'onSubmit' to fire unless the submit button is pressed:

const Test = () => {
  const submit = useSubmit();
  const lastResult = useActionData<typeof action>();

  const [form, fields] = useForm({
    lastResult,
    shouldValidate: 'onBlur',
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: schema });
    },
  });

  // This is firing on every 'blur'.  Disabling "shouldValidate: 'onBlur'" makes it stop.
  const onSubmit = (e: FormEvent) => {
    console.log('onSubmit', e);
    e.preventDefault();
    // submit(e.currentTarget as HTMLFormElement);  // <-- Submits the whole form on every blur
  };

  return (
    <Form id={form.id} method="post" onSubmit={onSubmit}>
      <TextField label='Field 1' name={fields.field1.name} />
      <TextField label='Field 2' name={fields.field2.name} />
      <Button type="submit">Submit</Button>
    </Form>
  );
};

Thanks!

[chimame]

Do you want to handle onSubmit after validating the data? If so, is this what you want to do?
https://conform.guide/api/react/useForm#options

const Test => {
  const [form, fields] = useForm({
    lastResult,
    shouldValidate: 'onBlur',
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: schema });
    },
    onSubmit(e) {
      console.log('onSubmit', e);
    }
  });

  return (
    <Form id={form.id} method="post" onSubmit={form.onSubmit}>
      <TextField label='Field 1' name={fields.field1.name} />
      <TextField label='Field 2' name={fields.field2.name} />
      <Button type="submit">Submit</Button>
    </Form>
  );
};

[kevinhpage]

I think that's what I'd need, yes. What I need is to add to the formData on submit, so I need to intercept the submit action - which I thought my handy 'onSubmit' would do! This looks like the right way to do it. Thanks!