Form is returning empty data object, but it should return values typed in form. onSubmit function should console.log values given in form, but I don't know why it does not working. Please check it out.
function App() {
const { register, handleSubmit } = useForm();
const onSubmit = (data, e) => {
e.preventDefault();
console.log(data);
console.log('sent');
};
const onError = (errors, e) => console.log(errors, e);
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input
name="email"
autoComplete="off"
placeholder="Your email"
ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
/>
<select
defaultValue="default"
name="select1"
ref={register({ name: "select1" }, { required: true })}
>
<option value="default" disabled>default</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<textarea
name="message"
placeholder="Your message"
ref={register({ name: "message" }, { required: true })}
/>
<button type="submit">Send</button>
</form>
</header>
</div>
);
}
Form is returning empty data object, but it should return values typed in form. onSubmit function should console.log values given in form, but I don't know why it does not working. Please check it out.
function App() {
const { register, handleSubmit } = useForm();
const onSubmit = (data, e) => {
e.preventDefault();
console.log(data);
console.log('sent');
};
const onError = (errors, e) => console.log(errors, e);
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input
name="email"
autoComplete="off"
placeholder="Your email"
ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
/>
<select
defaultValue="default"
name="select1"
ref={register({ name: "select1" }, { required: true })}
>
<option value="default" disabled>default</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<textarea
name="message"
placeholder="Your message"
ref={register({ name: "message" }, { required: true })}
/>
<button type="submit">Send</button>
</form>
</header>
</div>
);
}
Share
Improve this question
asked Nov 15, 2020 at 15:16
KosaaaaaKosaaaaa
1853 gold badges4 silver badges8 bronze badges
2 Answers
Reset to default 3check your render function with register
method:
register
only need validation argument within input elements.
API reference: https://react-hook-form./api#register
and also a section for get started:
https://react-hook-form./get-started#Quickstart
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input
name="email"
autoComplete="off"
placeholder="Your email"
ref={register({ required: true, pattern: /^\S+@\S+$/i })}
/>
<select
name="select1"
ref={register({ required: true })}
>
<option value="" disabled>default</option> // make sure this is empty to get validation work.
<option value="A">A</option>
<option value="B">B</option>
</select>
<textarea
name="message"
placeholder="Your message"
ref={register({ required: true })}
/>
<button type="submit">Send</button>
</form>
</header>
</div>
);
generally that's not how things are done in react you need a formData state object which will have same field as your form and n each form input you'll have an onchange function which updates the appropriate formData field like this
function App() {
const { register, handleSubmit } = useForm();
const [formdata, setformdata] = useState({
message:"",
email:"",
choice:"",
});
const onSubmit = ( e) => {
e.preventDefault();
//your form data now is in formdata
console.log(formdata);
console.log('sent');
};
const onError = (errors, e) => console.log(errors, e);
const onChangeHandler= (field)=>(e)=>setformdata({...formdata,[field]:e.target.data})
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input
name="email"
onChange={onchangeHandler('email')}
autoComplete="off"
placeholder="Your email"
ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
/>
<select
defaultValue="default"
name="select1"
onChange={onchangeHandler('choice')}
ref={register({ name: "select1" }, { required: true })}
>
<option value="default" disabled>default</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<textarea
name="message"
placeholder="Your message"
onChange={onchangeHandler('message')}
ref={register({ name: "message" }, { required: true })}
/>
<button type="submit">Send</button>
</form>
</header>
</div>
);
}