Theo's Typesafe Cult•3y 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•3y ago

You’d have to show code

ZionOP•3y 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•3y 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.

ZionOP•3y 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•3y 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?

ZionOP•3y ago

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

barry•3y ago

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

ZionOP•3y ago

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

barry•3y ago

Weird

cogdancer•3y 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•3y 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

ZionOP•3y ago

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

barry•3y ago

The fuck You using some random browser?

ZionOP•3y ago

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

barry•3y ago

If you are what about chrome does it happen there

Tom•3y 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

ZionOP•3y ago

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

barry•3y ago

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

barry•3y ago

https://github.com/barrybtw/aktiesparekonto

GitHub

GitHub - barrybtw/aktiesparekonto

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

ZionOP•3y 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•3y ago

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

Brendonovich•3y 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

ZionOP•3y ago

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

ZionOP•3y ago

will do

Brendonovich•3y ago

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

ZionOP•3y 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•3y ago

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

Brendonovich•3y ago

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

barry•3y ago

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

Brendonovich•3y ago

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

Brendonovich•3y ago

barry•3y ago

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

Brendonovich•3y 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

Did you find this page helpful?