React hook form error message

Tutorial built with React 17.0.2 and React Hook Form 7.15.0

This is a quick example of how to display a custom error message on a React Hook Form that is returned from an HTTP API request.

The below code snippets are from a React + Recoil auth tutorial I posted recently, to see the code running in a live demo app check out React + Recoil — Basic HTTP Authentication Tutorial & Example.

React Hook Form Component with Custom API Error

Path: /src/login/Login.jsx

The login page contains a form built with the React Hook Form library that contains username and password fields for logging into the React app.

Set error after failed HTTP request

The onSubmit function gets called when the form is submitted and valid, and posts the user credentials to the api by calling userActions.login(). If the api request fails the .catch() method is executed, which calls the React Hook Form setError() function with a name ('apiError') and an error object containing the message ({ message: error }). The setError() function adds the error to the formState.errors object which is then rendered at the bottom of the React Hook Form in the returned JSX template ({errors.apiError && ...).

import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

import { useUserActions } from '_actions';

export { Login };

function Login() {
    const userActions = useUserActions();

    // form validation rules 
    const validationSchema = Yup.object().shape({
        username: Yup.string().required('Username is required'),
        password: Yup.string().required('Password is required')
    });
    const formOptions = { resolver: yupResolver(validationSchema) };

    // get functions to build form with useForm() hook
    const { register, handleSubmit, setError, formState } = useForm(formOptions);
    const { errors, isSubmitting } = formState;

    function onSubmit({ username, password }) {
        return userActions.login(username, password)
            .catch(error => {
                setError('apiError', { message: error });
            });
    }

    return (
        <div className="col-md-6 offset-md-3 mt-5">
            <div className="alert alert-info">
                Username: test<br />
                Password: test
            </div>
            <div className="card">
                <h4 className="card-header">Login</h4>
                <div className="card-body">
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <div className="form-group">
                            <label>Username</label>
                            <input name="username" type="text" {...register('username')} className={`form-control ${errors.username ? 'is-invalid' : ''}`} />
                            <div className="invalid-feedback">{errors.username?.message}</div>
                        </div>
                        <div className="form-group">
                            <label>Password</label>
                            <input name="password" type="password" {...register('password')} className={`form-control ${errors.password ? 'is-invalid' : ''}`} />
                            <div className="invalid-feedback">{errors.password?.message}</div>
                        </div>
                        <button disabled={isSubmitting} className="btn btn-primary">
                            {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                            Login
                        </button>
                        {errors.apiError &&
                            <div className="alert alert-danger mt-3 mb-0">{errors.apiError?.message}</div>
                        }
                    </form>
                </div>
            </div>
        </div>
    )
}

Table of Contents

1. Introduction
2. What Is React Hook Form?
3. React Hook Form Features
4. How to Use React Hook Form
5. How to Use React Hook Form
6. Error Handling in React Hook Form
7. How To Validate React Forms With React Hook Form
   • Required Validation
   • Min Validation
   • Max Validation
   • MinLength Validation
   • MaxLength Validation
   • Pattern Validation
8. React Hook Form Validation With Yup
9. Using React Hook Form With UI Libraries
10. Wrapping Up
11. Where Do You Go Next?

npx create-react-app my-react-hook-form

npm install react-hook-form

import "./App.css";
import { useForm } from "react-hook-form";
function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    alert(data);
  };
  return (
    <div className='App'>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Username */}
        <section>
          <label>Enter username</label>
          <input
            type='text'
            placeholder='username'
            {...register("username", { required: true })}
          />
          {errors.username && <span>Username is required</span>}
        </section>
        {/* Age */}
        <section>
          <label>Enter age</label>
          <input
            type='number'
            placeholder='age'
            {...register("age", { required: true })}
          />
          {errors.age && <span>Age is required</span>}
        </section>
        {/* Submit button */}
        <section>
          <input type='submit' />
        </section>
      </form>
    </div>
  );
}
export default App;

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 10px;
}
form section{
  margin-bottom: 0.6rem;
  width: 300px;
}
label{
  display: block;
  margin-bottom: 0.3rem;
  font-size: 14px;
}
input{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
}
span{
  color: red;
  font-size: 13px;
  padding-left: 4px;
}

const { formState: { errors } } = useForm();

const { formState } = useForm()
const { errors } = formState;

{errors.inputBox && <span>Error occurred in inputBox</span>}

{errors.inputBox?.type === "validation-type" && <span>Custom error message</span>}

<input
  type='text'
  placeholder='username'
  {...register("username", { required: true })}
/>

{/* Age */}
<section>
  <label>Enter age</label>
  <input
    type='number'
    placeholder='age'
    {...register("age", { required: true, min: 18 })}
  />
  {errors.age?.type === "required" && <span>Age is required</span>}
  {errors.age?.type === "min" && <span>Age is too small</span>}
</section>

{/* Age */}
<section>
  <label>Enter age</label>
  <input
    type='number'
    placeholder='age'
    {...register("age", { required: true, min: 18, max: 70 })}
  />
  {errors.age?.type === "required" && <span>Age is required</span>}
  {errors.age?.type === "min" && <span>Age is too small</span>}
  {errors.age?.type === "max" && <span>Age is too high</span>}
</section>

{/* Username */}
<section>
  <label>Enter username</label>
  <input
    type='text'
    placeholder='username'
    {...register("username", { required: true, minLength: 4 })}
  />
  {errors.username?.type === "required" && (
    <span>Username is required</span>
  )}
  {errors.username?.type === "minLength" && (
    <span>Username must be at least 4 letters long</span>
  )}
</section>

{/* Username */}
<section>
  <label>Enter username</label>
  <input
    type='text'
    placeholder='username'
    {...register("username", {
      required: true,
      minLength: 4,
      maxLength: 10,
    })}
  />
  {errors.username?.type === "required" && (
    <span>Username is required</span>
  )}
  {errors.username?.type === "minLength" && (
    <span>Username must be at least 4 letters long</span>
  )}
  {errors.username?.type === "maxLength" && (
    <span>Username must not be 10 letters long</span>
  )}
</section>

{/* Username */}
<section>
  <label>Enter username</label>
  <input
    type='text'
    placeholder='username'
    {...register("username", {
      required: true,
      minLength: 4,
      maxLength: 10,
      pattern: /[a-z]/,
    })}
  />
  {errors.username?.type === "required" && (
    <span>Username is required</span>
  )}
  {errors.username?.type === "minLength" && (
    <span>Username must be at least 4 letters long</span>
  )}
  {errors.username?.type === "maxLength" && (
    <span>Username must not be 10 letters long</span>
  )}
  {errors.username?.type === "pattern" && (
    <span>Username must be lowercase</span>
  )}
</section>

npm install @hookform/resolvers yup

import * as yup from "yup";

export const schema = yup
  .object({
    username: yup
      .string()
      .required("Username is required")
      .min(4, "Username must be at least 4 letters long")
      .max(10, "Username must not be 10 letters long"),
    age: yup
      .number()
      .required("Age is required")
      .max(70, "Age is too high")
      .min(18, "Age is too small"),
  })
  .required();

import "./App.css";
import { useForm } from "react-hook-form";
import { schema } from "./schema";
import { yupResolver } from "@hookform/resolvers/yup";

function FormWithYup() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    alert(data);
  };
  return (
    <div className='App'>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Username */}
        <section>
          <label>Enter username</label>
          <input type='text' placeholder='username' {...register("username")} />
          <span>{errors.username?.message}</span>
        </section>
        {/* Age */}
        <section>
          <label>Enter age</label>
          <input type='number' placeholder='age' {...register("age")} />
          <span>{errors.age?.message}</span>
        </section>
        {/* Submit button */}
        <section>
          <input type='submit' />
        </section>
      </form>
    </div>
  );
}
export default FormWithYup;

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

import { ChakraProvider } from "@chakra-ui/react";

<ChakraProvider>
  <App />
</ChakraProvider>

import { HStack, PinInput, PinInputField } from "@chakra-ui/react";
import React from "react";
import { Controller, useForm } from "react-hook-form";
export const OtpForm = () => {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => alert(JSON.stringify(data));
  return (
    <div>
      <Controller
        name='otp'
        control={control}
        render={({ field }) => (
          <HStack>
            <PinInput {...field} onComplete={handleSubmit(onSubmit)}>
              <PinInputField />
              <PinInputField />
              <PinInputField />
              <PinInputField />
            </PinInput>
          </HStack>
        )}
      />
    </div>
  );
};