• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

137
Views
How to throw an error when the age is less than 5 years in react useHookForm hook

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>
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>}

CodeSandbox

almost 3 years ago · Juan Pablo Isaza Report

0

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

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error