Material UI with React Hook Form – Validation with Error Messages

by | Sep 24, 2021 | React | 0 comments

In this tutorial, I'll cover how to create a Material UI with React Hook Form - Validation with Error Messages. Scroll down to the end of the page to you can see the YouTube video(CodeAT21) and GitHub repository full source code available for this.

This react form is using the TextField, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, FormHelperText, FormGroup, Checkbox, and Button components from Material-UI. The elements we're adding are: five fields for the user to input their first name, last name, email, gender, I agree all terms and conditions and submit button.

Setup

First, we'll create the react project and install the two npm packages. In open your system terminal/command line enter the code below : 

npx create-react-app form-validation
cd form-validation
npm install @mui/material @emotion/react @emotion/styled
npm install react-hook-form
npm start

Next, Project structure your folder as follows. 

src
├── App.css
├── App.js
├── index.css
└── index.js

Next, open up the App.js file located in the src folder. You should see this: 

 App.js 
import React from 'react';
import TextField from '@mui/material/TextField';
import './App.css';
import {
  Button,
  Radio,
  RadioGroup,
  FormControlLabel,
  FormControl,
  FormLabel,
  FormHelperText,
  FormGroup,
  Checkbox,
} from '@mui/material';
import { useForm } from "react-hook-form";

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

  return (
    <div className="App__form">
      <h1> Material UI with React Hook Form - Validation with Error Messages </h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <TextField 
          id="outlined-basic" 
          name="firstName" 
          label="First Name" 
          variant="outlined" 
          fullWidth 
          {...register("firstName", { required: "First Name is required." })}
          error={Boolean(errors.firstName)}
          helperText={errors.firstName?.message}
        />
        <TextField 
          id="outlined-basic"
          label="Last Name"
          variant="outlined"
          fullWidth
          name="lastName"
          {...register("lastName", { required: "Last Name is required." })}
          error={Boolean(errors.lastName)}
          helperText={errors.lastName?.message}
        />
        <TextField
          id="outlined-basic"
          label="E-mail"
          variant="outlined"
          fullWidth
          name="email"
          {...register("email", { required: "E-mail Address is required." })}
          error={Boolean(errors.email)}
          helperText={errors.email?.message}
        />
{/* Radio button */}
        <FormControl error={Boolean(errors.gender)} >
          <FormLabel component="legend"> Choose Your Gender </FormLabel>
          <RadioGroup row aria-label="gender" name="gender">
            <FormControlLabel 
              value="female" 
              control={
                <Radio {...register("gender", { required: "Choose your gender" })} />
              } 
              label="Female"
             />
            <FormControlLabel 
              value="male" 
              control={
                <Radio {...register("gender", { required: "Choose your gender" })} />
              } 
              label="Male" 
              />
            <FormControlLabel 
              value="other" 
              control={
                <Radio {...register("gender", { required: "Choose your gender" })} />
              } 
              label="Other" 
            />
            
          </RadioGroup>
          <FormHelperText style={{color:'#d32f2f'}}>{errors.gender?.message}</FormHelperText>
        </FormControl>
        <div className="clearfix"></div>
{/* Check box */}
        <FormGroup 
          error={Boolean(errors.tnc)}
          style={{ display: "block", marginTop: "17px" }}
        >
          <FormControlLabel 
            control={
              <Checkbox  name="tnc" {...register("tnc", { required: "please aggre our terms and condtions" })} />
            } 
            label="I aggree all terms and conditions" 
          />
        </FormGroup>
        <FormHelperText style={{color:'#d32f2f'}}>{errors.tnc?.message}</FormHelperText>
        <div className="clearfix"></div>
        <Button variant="contained" color="primary" type="submit" className="btns">
            create new account
          </Button>
      </form>
    </div>
  )
}
export default App
Download

Basic Form Creation Using react-hook-form

To get started with the react hook form library with npm install react-hook-form after import useForm Hook into app.js. React hook form some Key features and highlights are:

  • useForm: It is access to alternate methods from react hook library
  • register: This method is validation rules
  • handleSubmit: first pass data after the validation
  • errors: error message corresponding to input field
  • reset: form reset to all fields