I ant to implement a form with react-hook-form. I tried this:
....
<form onSubmit={handleSubmit(onSubmit)} className='mt-4 register-form'>
<div className='row'>
<div className='col-sm-6'>
<div className='input-group mb-3'>
<Controller
control={control}
name={"name"} // the key of json
defaultValue={""}
render={({ field }) => (
<input
{...field}
type="text"
className="form-control"
placeholder="Name"
aria-label="name"
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
</div>
</div>
.....
Full page code:
When I submit the form I send a POST message using:
import axios from "axios";
import React from "react";
const baseURL = "https://jsonplaceholder.typicode.com/posts";
export const SubmitContact = (json) => {
return axios.post(baseURL, json);
};
But there is no validation message into the form and no final message that the form is successfully summitted.
Do you know how I can implement this functionality?
Try getting the errors from useForm like so:
const { errors, ...rest } = useForm();
<div className="col-sm-6">
<div className="input-group mb-3">
<Controller
control={control}
name={"name"} // the key of json
defaultValue={""}
rules={{ name: { required: true } }}
render={({ field }) => (
<input
{...field}
type="text"
className="form-control"
placeholder="Name"
aria-label="name"
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
{errors.name && (
<div className="alert alert-danger">{errors.name.message}</div>
)}
</div>
</div>;
To display error message:
const { errors, control, handleSubmit } = useForm();
...
<form onSubmit="{handleSubmit(onSubmit)}" className="mt-4 register-form">
<div className="row">
<div className="col-sm-6">
<div className="input-group mb-3">
<Controller
control={control}
name="name"
defaultValue=""
render={({ field }) => (
<input
{...field}
type="text"
className="form-control"
placeholder="Name"
aria-label="name"
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
{errors.name && <p>{errors.name.message}</p>}
</div>
</div>
</div>
</form>
To reset the form after submission:
const { errors, control, reset, handleSubmit } = useForm();
...
const onSubmit = (formData) => {
try {
SubmitContact(formData).then((res) => {
setPost(res.data);
reset();
});
} catch (e) {
console.error(e);
}
};
You are not using the rules correctly in Controller component, you don't need to define the name of registered input, you just have to say rules:
rules={{
required: "Required", // Note you are wrapping this inside a key which is not required
}}
To access this error messages, you need to use formState from useForm
const {formState: {errors}} = useForm()
// accessing errors
{errors.country?.message}
In order to clear form just use reset
Here's a working sandbox of your code: https://codesandbox.io/s/late-haze-jivrwp?file=/src/App.js
On submit you can see the error popping up on country field