Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: not able to submit the form, using Next.js 15 and React.js 19 #4103

Open
2 tasks done
Boby900 opened this issue Jun 26, 2024 · 5 comments
Open
2 tasks done

[bug]: not able to submit the form, using Next.js 15 and React.js 19 #4103

Boby900 opened this issue Jun 26, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@Boby900
Copy link

Boby900 commented Jun 26, 2024

Describe the bug

I am trying to submit the form and playing around with Next.js 15 and React.js 19 but form doesn't seems to be working, it's not getting submitted.
and I am also not seeing any

Affected component/components

Form

How to reproduce

use Next.js 15 and React.js 19
install the form component
try to submit the form.

When I remove the onSubmit function my form is submitted and data is getting console logged as URL =
GET /?username= 200 in 242ms,
GET /?username=sss 200 in 216ms

but not getting any type of warnings from zod when I am trying to submit the empty form and also not getting any requests in the network tab.

Codesandbox/StackBlitz link

https://github.com/Boby900/react-todo

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i3-4160 CPU @ 3.60GHz
    Memory: 385.89 MB / 3.92 GB
  Binaries:
    Node: 21.1.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.2.0 - ~\AppData\Roaming\npm\pnpm.CMD
    bun: 1.1.10 - ~\AppData\Roaming\npm\bun.CMD
  Browsers:
    Chrome: 126.0.6478.126
    Edge: Chromium (126.0.2592.68)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @hookform/resolvers: ^3.6.0 => 3.6.0
    @radix-ui/react-label: ^2.1.0 => 2.1.0
    @radix-ui/react-slot: ^1.1.0 => 1.1.0
    @testing-library/react: ^16.0.0 => 16.0.0
    @types/node: ^20 => 20.14.8
    @types/react: ^18 => 18.3.3
    @types/react-dom: ^18 => 18.3.0
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    babel-plugin-react-compiler: ^0.0.0-experimental-938cd9a-20240601 => 0.0.0-experimental-938cd9a-20240601
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.1.1 => 2.1.1
    eslint: ^8 => 8.57.0
    eslint-config-next: 15.0.0-rc.0 => 15.0.0-rc.0
    jsdom: ^24.1.0 => 24.1.0
    lucide-react: ^0.396.0 => 0.396.0
    next: 15.0.0-rc.0 => 15.0.0-rc.0
    next-auth: ^5.0.0-beta.19 => 5.0.0-beta.19
    postcss: ^8 => 8.4.38
    react: 19.0.0-rc-f994737d14-20240522 => 19.0.0-rc-f994737d14-20240522
    react-dom: 19.0.0-rc-f994737d14-20240522 => 19.0.0-rc-f994737d14-20240522
    react-hook-form: ^7.52.0 => 7.52.0
    tailwind-merge: ^2.3.0 => 2.3.0
    tailwindcss: ^3.4.1 => 3.4.4
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5 => 5.5.2
    vitest: ^1.6.0 => 1.6.0
    zod: ^3.23.8 => 3.23.8

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@Boby900 Boby900 added the bug Something isn't working label Jun 26, 2024
@hmongdev
Copy link

hmongdev commented Jun 26, 2024

I was having the same issue.

For me, the issue was an invalid schema / validation.

console.log(yourFormName.formState.errors);

#456 (comment)

@Boby900
Copy link
Author

Boby900 commented Jun 27, 2024

console.log(yourFormName.formState.errors);

thanks for jumping in, but still I am not able to solve it.

@Boby900
Copy link
Author

Boby900 commented Jun 27, 2024

I made some changes in code and data is getting console logged but zod is not providing any validation errors when I am submitting the empty form.

@hmongdev
Copy link

You have to make sure your schema validation matches your form. Good luck!

@Boby900
Copy link
Author

Boby900 commented Jun 28, 2024

okay, thanks for your help @hmongdev
but I have checked it multiple times, it's already matching with my form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants