CODEWITHSUNDEEP
reactjs
Mansour Qaderi
Mansour Qaderi

Reputation: 169

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

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;

Upvotes: 13

Views: 35925

Answers (4)

sadunna
sadunna

Reputation: 41

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

Upvotes: 0

Jason Rice
Jason Rice

Reputation: 544

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

Upvotes: 0

Mansour Qaderi
Mansour Qaderi

Reputation: 169

only change place register to last like:

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

Upvotes: 2

Calvin
Calvin

Reputation: 503

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.

Upvotes: 20

Related Questions