how to disable submit button initially?

Apparently,

canSubmit

canSubmit

true

true

initially even if e.g. mandatory fields are empty, because no field validation happened yet.

I tried using

defaultState

defaultState

like this, but it did not work:

 const form = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
    defaultState: {
      canSubmit: false,
    },
    onSubmit: async (values) => {
      console.log(values);
    },
  });

 const form = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
    defaultState: {
      canSubmit: false,
    },
    onSubmit: async (values) => {
      console.log(values);
    },
  });

I can disable my submit button using something like

disabled={!(isTouched && canSubmit)}

disabled={!(isTouched && canSubmit)}

but is there a "better" way?

TanStack•3y ago•

31 replies

still-lime

how to disable submit button initially?

Apparently,

canSubmit

canSubmit

true

true

initially even if e.g. mandatory fields are empty, because no field validation happened yet.

I tried using

defaultState

defaultState

like this, but it did not work:

 const form = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
    defaultState: {
      canSubmit: false,
    },
    onSubmit: async (values) => {
      console.log(values);
    },
  });

 const form = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
    defaultState: {
      canSubmit: false,
    },
    onSubmit: async (values) => {
      console.log(values);
    },
  });

I can disable my submit button using something like

disabled={!(isTouched && canSubmit)}

disabled={!(isTouched && canSubmit)}

but is there a "better" way?

how to disable submit button initially?

how to disable submit button initially?

Similar Threads