The validation errors are not showing using React Hook Form

Question

I'm using React Hook Form in order to validate some simple inputs :

import React from "react";
import useForm from "react-hook-form";

import "./App.css";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            className="mkn-input"
            name="firstName"
            placeholder="First name"
            ref={register({
              required: true,
              maxlength: 20,
              message: "invalid first name"
            })}
          />
          <span> {errors.firstName && errors.firstName.message}</span>

          <input
            placeholder="Last name"
            className="mkn-input"
            name="lastName"
            ref={register({
              pattern: /^[A-Za-z]+$/i,
              message: "Invalid last name"
            })}
          />
          {errors.lastName && <span> errors.lastName.message</span>}
          <input
            name="age"
            type="number"
            placeholder="Age"
            className="mkn-input"
            ref={register({ min: 18, max: 99 })}
          />
          <input type="submit" className="mkn-btn" />
        </form>
      </header>
    </div>
  );
}

export default App;

But I'm facing a weird issue with showing that errors in the DOM, i also to tried to log them in console but without success, what am I missing ?

the full code :

In RHF v7, useForm returns a fieldState object which in turn holds the errors. But beware that fieldState is some kind of proxy object and will always log as empty {} even when there are errors! — Tamlyn
– Tamlyn, Commented Aug 22, 2022 at 16:41

Dennis Vash · Accepted Answer · 2019-11-11 08:53:52Z

10

You need to add the message in the required field, or just query if there is an error:

<>
  <input
    name="firstName"
    placeholder="First name"
    ref={register({
      required: 'invalid first name'
    })}
  />
  <span> {errors.firstName && errors.firstName.message}</span>
</>

// Or 
<>
  <input
    placeholder="Last name"
    className="mkn-input"
    name="lastName"
    ref={register({
      required: true,
      pattern: /^[A-Za-z]+$/i
    })}
  />
  {errors.lastName && <span>Invalid last name</span>}
</>

// Or https://react-hook-form.com/advanced-usage#ErrorMessage

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            className="mkn-input"
            name="firstName"
            placeholder="First name"
            ref={register({
              required: 'invalid first name'
            })}
          />
          <span> {errors.firstName && errors.firstName.message}</span>

          <input
            placeholder="Last name"
            className="mkn-input"
            name="lastName"
            ref={register({
              required: true,
              pattern: /^[A-Za-z]+$/i
            })}
          />
          {errors.lastName && <span>Invalid last name</span>}
          <input
            name="age"
            type="number"
            placeholder="Age"
            className="mkn-input"
            ref={register({ min: 18, max: 99 })}
          />
          <input type="submit" className="mkn-btn" />
        </form>
      </header>
    </div>
  );
}

answered Nov 11, 2019 at 8:53

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg K Over a year ago

In v7, errors is within formState: const { formState: { errors } } = useForm();. See docs.

RJA Over a year ago

true formState : { errorsr } in v7, but it still doesn't log the errors sometimes. I'm experiencing this now with trying to implement custom scroll to events. Quite frustrating.

Suma Gowda · Accepted Answer · 2023-08-30 04:03:23Z

It worked after installing this component to render associated input's error message.

npm install @hookform/error-message

Here's an example for implementation:

 <input
        {...register("multipleErrorInput", {
          required: "This is required.",
          pattern: {
            value: /d+/,
            message: "This input is number only.",
          },
          maxLength: {
            value: 10,
            message: "This input exceed maxLength.",
          },
        })}
      />
<div>
    {errors.multipleErrorInput && (
                      <div className="text-red-500 mt-4">
                        <span>{errors.multipleErrorInput.message}</span>
                      </div>
                    )}
</div>

More info here: https://react-hook-form.com/docs/useformstate/errormessage

Carlos Mendez · Accepted Answer · 2024-03-31 06:52:03Z

May be a litte bit late but I would like what works for me:

import { FC, useState } from "react";
import { useRoles } from "../../hooks";
import Select, { SingleValue } from "react-select";
import { Option } from "../../types/types";
import { UseFormRegister } from "react-hook-form";
import { CreateUserDto } from "../../api";

type Props = {
  onSelect: (role: Option | null) => void;
  register: UseFormRegister<CreateUserDto>;
};

export const RolesSelect: FC<Props> = ({ onSelect, register }) => {
  const { rolesOptions } = useRoles();
  const [selectedRole, setSelectedRole] = useState<SingleValue<Option>>();

  const onChange = (option: SingleValue<Option>) => {
    setSelectedRole(option);
    onSelect(option);
  };

  return (
    <Select
      {...register("roleId", {
        required: "El rol es requerido",
      })}
      name="roleId"
      options={rolesOptions}
      value={selectedRole}
      onChange={onChange}
    />
  );
};

And in my form

...
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<UserForm>();

return   <RolesSelect
            register={register}
            onSelect={(d) => {
              console.log(d);
            }}
          />

Slbox · Accepted Answer · 2023-02-22 00:12:55Z

-3

In our case (with [email protected]) this was caused by React.StrictMode.

Removing React.StrictMode or running the code in production resolves the issue.

answered Feb 22, 2023 at 0:12

Slbox

13.4k19 gold badges68 silver badges139 bronze badges

Collectives™ on Stack Overflow

The validation errors are not showing using React Hook Form

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related