Theo's Typesafe Cult•16mo ago

submitting form results in page reload/url change t3+react-hook-form+shadcn

I'm trying to build a form using react hook form and shadcn form component, but it keeps reloading the page after submit and add the "?username=" to the url (which makes it ignore the validation since it just redirects the url), I copy pasted the same code as shadcn has on his website for testing, still does it, cant figure out the issue. anyone knows how to fix it?

Solution:

is there a reason you have void form.handleSubmit? pretty sure that should just be form.handleSubmit

Jump to solution

33 Replies

barry•16mo ago

You’d have to show code

Zion•16mo ago

Of what tho? I would just be copy pasting the example from his website which I linked

const Dashboard = () => {
  return (
    <>
      <main className="flex min-h-screen flex-col p-5">
        <div className="flex flex-col items-center gap-2">
          <ProfileForm />
        </div>
      </main>
    </>
  );
};
const formSchemaTest = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
});
export function ProfileForm() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchemaTest>>({
    resolver: zodResolver(formSchemaTest),
    defaultValues: {
      username: "",
    },
    mode: "all",
    
  });

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchemaTest>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values);
  }

  return (
    <Form {...form}>
      <form onSubmit={void form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="shadcn" {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

const Dashboard = () => {
  return (
    <>
      <main className="flex min-h-screen flex-col p-5">
        <div className="flex flex-col items-center gap-2">
          <ProfileForm />
        </div>
      </main>
    </>
  );
};
const formSchemaTest = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
});
export function ProfileForm() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchemaTest>>({
    resolver: zodResolver(formSchemaTest),
    defaultValues: {
      username: "",
    },
    mode: "all",
    
  });

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchemaTest>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values);
  }

  return (
    <Form {...form}>
      <form onSubmit={void form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="shadcn" {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

it just pushes me to /dashboard?username= and reloads

cogdancer•16mo ago

What happens if you add an event parameter e to your onSubmit function, then call e.preventDefault() as the first line of the function? Function signature for onSubmit can be found here: https://react-hook-form.com/docs/useform/handlesubmit

Performant, flexible and extensible forms with easy-to-use validation.

Zion•16mo ago

 function onSubmit(values: z.infer<typeof formSchemaTest>, e: Event) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values);
  }

 function onSubmit(values: z.infer<typeof formSchemaTest>, e: Event) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values);
  }

like this? I tried it before and it gives me an error

cogdancer•16mo ago

So it does expect an optional event param, but the type defs don't match? What happens if you type e as any, just to try it?

Zion•16mo ago

doesnt give me the error there, but gives me a different error

barry•16mo ago

Shouldn’t need to do this at all You sure your form isn’t inside another form and the button is propagating?

Zion•16mo ago

I have the form component called in Dashboard which is a nextjs page

barry•16mo ago

Weird

cogdancer•16mo ago

I'll defer to barry since I've only used react-hook-form a little, but just to close the loop: I think you're using the wrong Event type in your onSubmit function definition. If you want to follow this up, I would track down the Event type that's expected by react-hook-form and make sure I'm importing that and not something else.

barry•16mo ago

And I am on the phone and the only way I find myself debugging this is running it locally Try just making a new project again see if it persists

Zion•16mo ago

yep, made a new project and it seems like it persists website is being refrehsed and ?username= is added to the url

barry•16mo ago

The fuck You using some random browser?

Zion•16mo ago

💀 Ive used react form hook with next js (without t3 /shadcn) and jt worked flawlessly

barry•16mo ago

If you are what about chrome does it happen there

Tom•16mo ago

I’ll say I saw this as well when I had a form in a dialog not nested in a form on the main page. Submitting one submitted the other for some reason. Prevent default seemed to work for me

Zion•16mo ago

Im on chrome 😭 Must be something with t3 I dont know what else can cause this

barry•16mo ago

I made this with shad form yesterday try cloning and see if it happens in my app too

barry•16mo ago

https://github.com/barrybtw/aktiesparekonto

GitHub

GitHub - barrybtw/aktiesparekonto

Contribute to barrybtw/aktiesparekonto development by creating an account on GitHub.

Zion•16mo ago

I will have to do it tomorrow, already 2 am and i gotta wake up early I will keep you updated when I check

Solution

Brendonovich•16mo ago

is there a reason you have void form.handleSubmit? pretty sure that should just be form.handleSubmit

Brendonovich•16mo ago

also - do yourself a favour and wrap your onSubmit in handleSubmit in the same place you declare it. that way you don't have to do any manual types for the function:

const onSubmit = form.handleSubmit(values => {
  console.log(values)
})

...

<form onSubmit={onSubmit}/>

const onSubmit = form.handleSubmit(values => {
  console.log(values)
})

...

<form onSubmit={onSubmit}/>

on this, i think handleSubmit injects a preventDefault call for you so that this exact reload behaviour doesn't happen but you're putting void beforehand, which evaluates the handleSubmit call but then returns undefined, rather than the result of handleSubmit so really it's just not doing anything

Zion•16mo ago

yeah, I do it to avoid this error, I used this trick before and it never did a problem to me

Zion•16mo ago

will do

Brendonovich•16mo ago

that's not an error, its eslint yelling at you and in this case you should ignore it

Zion•16mo ago

okay, I did it like this and removed the void but it still reloads and changes the url wait I put it in the wrong component it did work wow damn enlist

barry•16mo ago

I’ve done that before no problem. Weird it’s bugging here

Brendonovich•16mo ago

I don't see how that'd work haha, no onSubmit handler would end up being defined

barry•16mo ago

Because it’s a type Telling typescript it returns void I’ve never had that problem of it doing undefined

Brendonovich•16mo ago

void is a JS operator, not a type well it is a type but not in this context

Brendonovich•16mo ago

barry•16mo ago

💀 I've seen people use it with t3 for ages, something must be amiss

Brendonovich•16mo ago

yeah i've seen ppl use it too but not there haha

Gaming

Programming

submitting form results in page reload/url change t3+react-hook-form+shadcn