handleSubmit doesn't working in Nextjs 14.0.4

[kevinantech]

Version Number

7.49.2

Codesandbox/Expo snack

---

Steps to reproduce

When I click the submit button the handleSubmit function is not called.

page.tsx

"use client";
import { IAdminAccount } from "@/entity/admin/admin.entity";
import { useForm } from "react-hook-form";
import styles from "./style.module.css";

export default function Auth() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IAdminAccount>();

  return (
    <div className="h-screen bg-complementary-1 overflow-hidden">
      <form
        className={`${styles.keyframes} w-[25rem] h-[25rem] mt-24 mx-auto rounded-2xl bg-white overflow-hidden shadow`}
        onSubmit={(e) => {
          e.preventDefault();
          handleSubmit(
            () => {
              console.log("onValid");
            },
            () => {
              console.log("onInvalid");
            }
          );
        }}
      >
        <h1 className="mt-12 mb-10 text-center text-2xl text-neutral-500 font-bold">
          Iniciar Sesión
        </h1>
        <div className="w-[18.75rem] mb-5 mx-auto">
          <label
            htmlFor="username-input"
            className="block mb-2 text-[0.9rem] text-neutral-500 font-semibold"
          >
            Usuario
          </label>
          <input
            className="w-full h-10 leading-[2.5rem] p-2 border border-neutral-300 rounded-lg text-neutral-500"
            id="username-input"
            type="text"
            {...register("username", { required: true })}
          />
        </div>
        <div className="w-[18.75rem] mb-5 mx-auto">
          <label
            htmlFor="password-input"
            className="block mb-2 text-[0.9rem] text-neutral-500 font-semibold"
          >
            Contraseña
          </label>
          <input
            className="w-full h-10 leading-[2.5rem] p-2 border border-neutral-300 rounded-lg text-neutral-500"
            id="password-input"
            type="password"
            {...register("password", { required: true })}
          />
        </div>
        <button
          type="submit"
          className="block w-64 h-12 mt-8 mx-auto rounded-lg text-white text-base font-bold bg-complementary-2 hover:bg-[#e3364e]"
        >
          Acceder
        </button>
      </form>
    </div>
  );
}

---

package.json

{
  "name": "jerseysgoat",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "add-admin": "tsc --outDir dist src/scripts/add-admin.ts && node dist/scripts/add-admin.js"
  },
  "dependencies": {
    "@types/uuid": "9.0.7",
    "bcrypt": "5.1.1",
    "dotenv": "16.3.1",
    "firebase": "10.7.1",
    "firebase-admin": "12.0.0",
    "js-cookie": "3.0.5",
    "next": "14.0.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.49.2",
    "uuid": "9.0.1"
  },
  "devDependencies": {
    "@types/bcrypt": "5.0.2",
    "@types/js-cookie": "3.0.6",
    "@types/node": "20",
    "@types/react": "18",
    "@types/react-dom": "18",
    "autoprefixer": "10.0.1",
    "eslint": "8",
    "eslint-config-next": "14.0.4",
    "postcss": "8",
    "tailwindcss": "3.3.0",
    "typescript": "5"
  }
}

Expected behaviour

I hope that either console.log (onValid or onInvalid) will be printed.

What browsers are you seeing the problem on?

Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

Requires a reproduction sandbox.