CODEWITHSUNDEEP
reactjsformsnext.jsreact-hook-formzod
Bruno Bispo
Bruno Bispo

Reputation: 183

Problems with submit button in react-hook-form

I'm doing a form using react-hook-form and zod, however my submit button isn't working. the console.log() for debugging isn't showing nothing and no other errors are appearing at the browser console.What i'm I doing wrong?

'use client'
import { FormField, PasswordField } from '@/components/ui/forms'
import Button from '@/components/ui/root/Button'
import { HiWrenchScrewdriver } from "react-icons/hi2"
import { MdEmail } from "react-icons/md"
import { FaLock } from "react-icons/fa6";
import React from 'react'
import BraesiLogo from '@/components/ui/public_layout/BraesiLogo';
import ProgasLogo from '@/components/ui/public_layout/ProgasLogo';
import { useForm, Controller, SubmitHandler } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { LoginForm as LoginType, LoginSchema } from '@/utils/schemas'


export default function LoginForm() {

    const { register, handleSubmit, formState: { errors }, control } = useForm<LoginType>({
        mode: 'all',
        resolver: zodResolver(LoginSchema)
    })

    const login: SubmitHandler<LoginType> = (data: LoginType) => {
        console.log({ data })
    }

    return (
        <>
            <div className='border border-outline w-[345px] bg-glass rounded'>
                <div className='border-b w-full p-6 border-outline flex items-center flex-col justify-center gap-6'>
                    <HiWrenchScrewdriver size={40} />
                    <h1 className='text-2xl font-bold'>Assistência Técnica</h1>
                </div>
                <form className='p-6 space-y-12' onSubmit={handleSubmit(login)}>
                    <span className='space-y-6'>
                        <Controller
                            name='email'
                            control={control}
                            render={(field) => <FormField {...field} type='text' FieldName='E-mail' icon={<MdEmail size={20} />} placeholder='digite seu endereço de e-mail' style='text-secondary outline-none bg-glass border-outline border' />}
                        />
                        <Controller
                            name='password'
                            control={control}
                            render={(field) => <PasswordField {...field} icon={<FaLock size={18} />} FieldName='Senha' placeholder='digite sua senha' style='text-secondary outline-none bg-glass border-outline border' />}
                        />
                    </span>
                    <Button type='submit' text='Entrar' style='w-full' />
                </form>
            </div >
            <div className='flex gap-8'>
                <ProgasLogo size={110} />
                <BraesiLogo size={110} />
            </div>
        </>
    )
}

If I log the errors from useForm hook thats what appear:

Error Log

Upvotes: 0

Views: 816

Answers (2)

Cas
Cas

Reputation: 97

I don't know if you solved the problem, but i had a similar problem... Add defaultValues into the code... worked for me

    const { register, handleSubmit, formState: { errors }, control } = useForm<LoginType>({
    mode: 'all',
    resolver: zodResolver(LoginSchema),
    defaultValues:{
      email:"",
      password:""}
})

Upvotes: 0

Abdul786
Abdul786

Reputation: 1

I Think you just need to change type of button which you written type="form" should be type="submit"

Upvotes: 0

Related Questions