Theo's Typesafe Cult•13mo ago

Problem with react-hook-form

so basically my form is submitting only one time after that i need to reload the page so it will submit and validate the form also i am using NextJS and Mantine(its a framework like bootstrap and other libs)

10 Replies

stoyko•13mo ago

2) https://imjosh.dev/blog/bad-questions

Bad Questions

An article by Josh

stoyko•13mo ago

wait no, the other way around

TayyabCodesOP•13mo ago

wdym

rocawear•13mo ago

I would start by showing code, impossible to debug without any information

TayyabCodesOP•13mo ago

there is nothing to show in code its just a form designed with Mantine, react-hook-form and zod everything works fine its just that you can only submit once i have looked online many people just said you have used useForm() twice which i dont think i am doing

rocawear•13mo ago

so you want people to guess since you are not providing code?

TayyabCodesOP•13mo ago

const methods = useForm({
    resolver: zodResolver(message),
  });
  const {
    register,
    handleSubmit,
    control,
    reset,
    setValue,
    watch,
    formState: { errors, isSubmitSuccessful, isSubmitting },
  } = methods;

const methods = useForm({
    resolver: zodResolver(message),
  });
  const {
    register,
    handleSubmit,
    control,
    reset,
    setValue,
    watch,
    formState: { errors, isSubmitSuccessful, isSubmitting },
  } = methods;

that what i am doing which part of code you want? here is the form:

<FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <LoadingOverlay
          visible={loading}
          zIndex={1000}
          overlayProps={{ radius: "sm", blur: 2 }}
        />
        <Group justify="space-between">
          <Title order={2}>Send a Message</Title>
          <Controller
            name="channel"
            control={control}
            render={({ field }) => (
              <Select
                variant="filled"
                checkIconPosition="right"
                placeholder="Select Channel"
                data={chName}
                searchable
                nothingFoundMessage="No Channel Found"
                error={errors && errors.channel?.message}
                {...field}
              />
            )}
          />
        </Group>
        <Textarea
          className="my-3"
          variant="filled"
          label="Message"
          withAsterisk
          description="What you want to send to the Discord?"
          placeholder="Hello, This is a message sent from Test Bot Dashboard Website"
          autosize
          minRows={5}
          error={errors && errors.content?.message}
          {...register("content")}
        />
        <EmbedBuilder
          register={register}
          errors={errors}
          setValue={setValue}
          control={control}
          isSubmitSuccessful={isSubmitSuccessful}
          watch={watch}
        />
        <Button type="submit" disabled={isSubmitting}>
          Send
        </Button>
      </form>
    </FormProvider>

<FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <LoadingOverlay
          visible={loading}
          zIndex={1000}
          overlayProps={{ radius: "sm", blur: 2 }}
        />
        <Group justify="space-between">
          <Title order={2}>Send a Message</Title>
          <Controller
            name="channel"
            control={control}
            render={({ field }) => (
              <Select
                variant="filled"
                checkIconPosition="right"
                placeholder="Select Channel"
                data={chName}
                searchable
                nothingFoundMessage="No Channel Found"
                error={errors && errors.channel?.message}
                {...field}
              />
            )}
          />
        </Group>
        <Textarea
          className="my-3"
          variant="filled"
          label="Message"
          withAsterisk
          description="What you want to send to the Discord?"
          placeholder="Hello, This is a message sent from Test Bot Dashboard Website"
          autosize
          minRows={5}
          error={errors && errors.content?.message}
          {...register("content")}
        />
        <EmbedBuilder
          register={register}
          errors={errors}
          setValue={setValue}
          control={control}
          isSubmitSuccessful={isSubmitSuccessful}
          watch={watch}
        />
        <Button type="submit" disabled={isSubmitting}>
          Send
        </Button>
      </form>
    </FormProvider>

what else you need please tell? my laptop is dead so please answer i will see it and then when i will come back i will answer back Thanks in advance

K1|ller•13mo ago

I couldn't understand the question you want to reset the form or something like that?

Chevonair•13mo ago

So what’s the behavior you’re looking for in the form? Do you want your form to automatically reload the page when you press a submit button? Or do you want to be able to submit multiple times without reload? Or perhaps something else? I’d like to help though I can’t say I understand what you want here

Josh•13mo ago

read my artcle. We literally cannot possibly help you debug if we know nothing about your problem. We are here to help, but we arent going to if you make it difficult. Your literally telling us "my car wont start, you drive cars so you should be able to help me fix mine" give us as much information as you possibly can entire files, link to github source code if you can. errors, what have you tried, why didnt what you try work, etc. yeah im also very confused on what your even asking here. give full examples of whats happening now, and the behavior you want.

Gaming

Programming

Problem with react-hook-form