handleSubmit react hook form do not working, its do not execute onSumbmit

Question

onSubmit does not executed and I do not know what is problem , its execute without handleSumbit but I need it for get all data from form. I think I have done everything necessary for this form but its do not working. I need help?

import { useForm } from 'react-hook-form'; const LoginPage = () =>{ const { register, handleSubmit } = useForm(); const onSubmit = (data) => ( alert(JSON.stringify(data)) ); return( <section className="section-login"> <div className="login__header"> <img src={anarLogo} className="login__header--logo" alt="header logo" /> </div> <form className='login__form' onSubmit={handleSubmit(onSubmit)}> <Input register={register} inputName='User name' inputType='text' inputClass='form__input--text' inputPlaceholder='Username' // inputErrors = {errors} inputLabel = 'username' rules={{ required: true, maxLength: 20, min: 3 }} /> <Input register={register} inputName='Password' inputType='password' inputClass='form__input--password' inputPlaceholder='Password' // inputErrors = {errors} inputLabel = 'password' rules={{ required: true, maxLength: 20, min: 3 }} /> <button type='submit'></button> </form> </section> ) }

my input file :

 const Input = ({register, inputName, inputType, inputClass, inputPlaceholder, inputLabel, rules,}) => { return( <div className='form__input'> <input {...register(inputLabel , {...rules})} name={inputName} type={inputType} className={`input ${inputClass}`} placeholder={ inputPlaceholder } /> </div> ) } export default Input;

You assign the onSubmit event the return value of handleSubmit(onSubmit), which makes no sense, since onSubmit expects to be assigned a function, what you probably trying to achieve is onSubmit={() => handleSubmit(onSubmit)}, this will correctly execute your handleSubmit function when submitting — sschwei1
– sschwei1, Commented Jul 6, 2021 at 8:39
onSubmit={(e) => {validateErrors();handleSubmit(onSubmit)(e);}} is what worked for me. notice the currying — Ali Mert Çakar
– Ali Mert Çakar, Commented Sep 20, 2022 at 12:58

Calvin · Accepted Answer · 2021-07-06 09:15:47Z

The register() function returns an object with a name property. In your input file, you are overwriting the name that it provides (see the line directly below the one where the result of register() is spread onto <input>). This is causing the form to fail the validation rules that you set. The first argument of handleSubmit() does not get called unless validation is successful.

your last sentence was so important, and led me to find my issue. The first argument of handleSubmit() does not get called unless validation is successful. onSubmit is not working? check all your validation rules!
Crazy that it will fail silently. Not even a notice in the console?

Mansour Qaderi · Accepted Answer · 2021-07-07 05:04:51Z

only change place register to last like:

 <input name={inputName} type={inputType} className={`input ${inputClass}`} placeholder={ inputPlaceholder } {...register(inputLabel , {...rules})} />

Jason Rice · Accepted Answer · 2024-03-27 22:43:19Z

The other approach is just setting noValidate on your form tag if you don't need form validation (i.e. radio button group).

sadunna · Accepted Answer · 2024-05-30 13:25:05Z

In my case problem was to fill all fields, because I used defaultValues and after that I had to fill fields as they are required

TylerH · Accepted Answer · 2025-10-29 13:50:09Z

My submission was silently failing as well, but then I looked at the handleSubmit signature and saw this:

const handleSubmit: (onValid: SubmitHandler<{ manualRosterUsers?: TManualRosterUserType[]; }>, onInvalid?: SubmitErrorHandler<{ manualRosterUsers?: TManualRosterUserType[]; }> | undefined) => (e?: React.BaseSyntheticEvent) => Promise<void>

You can provide a 2nd parameter to handleSubmitCSV and it will log your error.

Collectives™ on Stack Overflow

handleSubmit react hook form do not working, its do not execute onSumbmit

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Related