CODEWITHSUNDEEP
javascriptreactjsreact-hook-form
Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The validation errors are not showing using React Hook Form

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 :

Edit React Hook Form - Custom Input

Upvotes: 16

Views: 44105

Answers (4)

Carlos Mendez
Carlos Mendez

Reputation: 3

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);
            }}
          />

Upvotes: 0

Suma Gowda
Suma Gowda

Reputation: 41

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

Upvotes: 0

Slbox
Slbox

Reputation: 13108

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

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

Upvotes: -3

Dennis Vash
Dennis Vash

Reputation: 53874

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

Edit React Hook Form - Custom Input

Upvotes: 10

Related Questions