In the form I have one date-picker. From the date-picker the user is selecting the date of birth. I want to throw an error, if the age is less than five years from the current date. Suppose the user selects year 2015, then it should throw an error.
<div class="input-group date" data-provide="datepicker">
<input
{...register("dob", {
required: true,
})}
type="date"
id="birthday"
min="1899-01-01"
max="2000-13-13"
class="form-control"
onClick={set}
/>
{errors?.dob?.type === "required" && (
<p>This field is required</p>
)}
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
You should define a custom validate function to check the selected date and pass it to the register section.
A bare minimal example:
const validateDate = (value) => {
const selected = new Date(value).getFullYear();
const now = new Date().getFullYear();
return now - selected >= 5;
};
...
<input
{...register("dob", {
required: true,
validate: validateDate
})}
type="date"
id="birthday"
min="1899-01-01"
max="2000-13-13"
class="form-control"
onClick={set}
/>
{errors?.dob?.type === "required" && (
<p>This field is required</p>
)}
{errors?.dob?.type === "validate" && <p>Invalid date</p>}
So based on your codes, here is what you need to do:
const {
register,
handleSubmit,
formState: { errors },
watch,
setError
} = useForm();
const onSubmit = (data) => console.log(data);
useEffect(() => {
const db = watch("dob");
if (db) {
const dbDate = new Date(db).getFullYear();
const currentDate = new Date().getFullYear();
const age = currentDate - dbDate;
if (age < 5) {
setError("dob", {
type: "too young",
message: "Sorry bro! you're too young to use this ;)"
});
}
}
}, [watch("dob")]);
and then use the error wherever you wish:
{errors?.dob?.type === "too young" && (
<p style={{ color: "red" }}>{errors.dob.message}</p>
)}
here is a working demo to show how it's look like: https://codesandbox.io/s/funny-surf-d4gtt?file=/src/App.js:2336-2453